:root{
  --paper:#e8e1d8;
  --ink:#11100f;
  --white:#f7f3ee;
  --muted:rgba(255,255,255,.55);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#0c0b0a;
  color:var(--white);
  font-family:"DM Sans",sans-serif;
  overflow-x:hidden;
}

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

button{font:inherit}

.grain{
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* HEADER */

.header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:30;
  height:100px;
  padding:25px 5vw;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
}

.brand{
  display:flex;
  flex-direction:column;
  width:max-content;
}

.brand>span{
  font-family:"Italiana",serif;
  font-size:40px;
  line-height:.8;
  letter-spacing:-2px;
}

.brand small{
  margin-top:8px;
  font-size:7px;
  letter-spacing:4.6px;
}

.header nav{
  display:flex;
  gap:40px;
  padding-top:8px;
}

.header nav a{
  font-size:12px;
  opacity:.7;
  transition:.25s;
}

.header nav a:hover{opacity:1}

.header-cta{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:20px;
  padding:12px 20px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:100px;
  font-size:12px;
  backdrop-filter:blur(12px);
  transition:.3s;
}

.header-cta i{font-style:normal}

.header-cta:hover{
  background:#fff;
  color:#111;
}


/* HERO */

.hero{
  position:relative;
  height:100svh;
  min-height:760px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 38%,#8a7c6e 0%,#51473e 29%,#29231e 56%,#0c0b0a 100%);
  transition:background 1s cubic-bezier(.2,.8,.2,1);
}

.hero::before{
  content:"";
  position:absolute;
  inset:-15%;
  background:
    linear-gradient(112deg,transparent 30%,rgba(255,255,255,.11) 37%,transparent 48%),
    linear-gradient(100deg,transparent 64%,rgba(255,255,255,.07) 69%,transparent 78%);
  transform:rotate(-4deg);
  pointer-events:none;
}

.hero-light{
  position:absolute;
  border-radius:50%;
  filter:blur(130px);
  opacity:.12;
  pointer-events:none;
  transition:background .9s;
}

.hero-light-a{
  width:600px;
  height:600px;
  left:-200px;
  top:8%;
  background:#e2d1bf;
}

.hero-light-b{
  width:480px;
  height:480px;
  right:0;
  bottom:-15%;
  background:#8f7358;
}

.hero-copy{
  position:absolute;
  z-index:8;
  left:6vw;
  top:24%;
  width:39vw;
}

.project-count{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:30px;
  font-size:11px;
  letter-spacing:3px;
  opacity:.8;
}

.eyebrow{
  margin:0 0 23px;
  font-size:9px;
  letter-spacing:4.5px;
  opacity:.62;
}

.hero-copy h1{
  margin:0;
  font:400 clamp(62px,6.7vw,112px)/.92 "Italiana",serif;
  letter-spacing:-.035em;
}

.hero-copy h2{
  margin:7px 0 25px;
  font-size:clamp(38px,4.1vw,70px);
  font-weight:300;
  line-height:.9;
  letter-spacing:-.055em;
}

.hero-copy h2 em{
  font-family:"Italiana",serif;
  font-weight:400;
}

.hero-meta{
  margin:0;
  font-size:8px;
  letter-spacing:4px;
  opacity:.65;
}

.project-link{
  margin-top:38px;
  display:flex;
  align-items:center;
  gap:17px;
  padding:0;
  border:0;
  background:none;
  color:white;
  cursor:pointer;
}

.circle-arrow{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.62);
  border-radius:50%;
  font-size:19px;
  transition:.3s;
}

.project-link:hover .circle-arrow{
  background:#fff;
  color:#111;
  transform:rotate(-10deg);
}

.project-link>span:last-child{font-size:12px}

.visual-stage{
  position:absolute;
  z-index:6;
  right:-1.5vw;
  top:21%;
  width:min(59vw,930px);
  perspective:1600px;
}

.device-wrap{
  transform:translate3d(0,0,0);
  transition:transform .3s;
}

.device{
  transform-style:preserve-3d;
  transform:rotateY(-9deg) rotateX(4deg) rotateZ(.7deg);
  transition:transform .11s ease-out;
}

.screen-shell{
  padding:11px;
  border-radius:22px 22px 10px 10px;
  background:linear-gradient(145deg,#303030,#050505);
  box-shadow:0 50px 100px rgba(0,0,0,.58);
}

.browser-ui{
  height:24px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:5px;
  background:#161616;
  border-radius:10px 10px 0 0;
}

.browser-ui span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#5d5d5d;
}

.browser-ui i{
  margin:auto;
  padding-right:35px;
  font-size:7px;
  font-style:normal;
  letter-spacing:1px;
  color:#bdbdbd;
  opacity:.6;
}

.screen-viewport{
  position:relative;
  aspect-ratio:16/9.65;
  overflow:hidden;
  background:#ddd;
  border-radius:0 0 8px 8px;
}

.screen-viewport img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top;
  transition:
    opacity .45s,
    transform 1s cubic-bezier(.2,.8,.2,1);
}

.screen-shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 35%);
  mix-blend-mode:screen;
}

.device-base{
  width:104%;
  height:28px;
  margin-left:-2%;
  background:linear-gradient(#464646,#121212);
  border-radius:0 0 50% 50%/0 0 100% 100%;
  box-shadow:0 15px 30px rgba(0,0,0,.35);
}

.floating-note{
  position:absolute;
  top:-4%;
  right:4%;
  font:italic 20px/1.18 "Italiana",serif;
  opacity:.48;
  transform:rotate(-8deg);
}

.project-tabs{
  position:absolute;
  z-index:12;
  top:43%;
  right:3.5vw;
  display:flex;
  flex-direction:column;
  gap:19px;
}

.project-tabs button{
  position:relative;
  width:88px;
  padding:0;
  display:grid;
  grid-template-columns:25px 1fr;
  gap:8px;
  align-items:center;
  border:0;
  background:none;
  color:#fff;
  text-align:left;
  cursor:pointer;
  opacity:.38;
  transition:.3s;
}

.project-tabs button span{font-size:10px}
.project-tabs button b{
  font-size:8px;
  letter-spacing:1.5px;
  font-weight:500;
  visibility:hidden;
}

.project-tabs button.active{opacity:1}
.project-tabs button.active b{visibility:visible}

.project-tabs button.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:24px;
  height:1px;
  background:#fff;
}

.hero-scroll{
  position:absolute;
  z-index:9;
  right:3.5vw;
  bottom:4vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:8px;
  letter-spacing:3px;
}

.hero-scroll i{
  width:1px;
  height:45px;
  background:linear-gradient(#fff,transparent);
}


/* MANIFESTO */

.manifesto{
  min-height:66vh;
  padding:10vh 6vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 50%,rgba(109,88,69,.25),transparent 34%),
    #090807;
}

.manifesto h2{
  margin:10px 0 0;
  font:400 clamp(80px,10vw,165px)/1 "Italiana",serif;
  letter-spacing:-.04em;
}


/* WORK */

.work{
  padding:13vh 5vw 15vh;
  background:var(--paper);
  color:var(--ink);
}

.eyebrow.dark{color:#111}

.section-heading{
  margin-bottom:7vh;
}

.section-heading h2{
  margin:0;
  font-size:clamp(58px,6.2vw,105px);
  font-weight:300;
  line-height:.87;
  letter-spacing:-.055em;
}

.section-heading h2 em{
  font-family:"Italiana",serif;
  font-weight:400;
}

.visual-projects{
  display:grid;
  grid-template-columns:1.15fr .925fr .925fr;
  gap:14px;
  align-items:start;
}

.visual-card{
  min-width:0;
}

.visual-card-screen{
  position:relative;
  overflow:hidden;
  aspect-ratio:1.32;
  background:#c9c0b7;
}

.visual-card-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 70px rgba(0,0,0,.08);
}

.visual-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}

.visual-card:hover img{
  transform:scale(1.035);
}

.visual-card-caption{
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:12px;
  align-items:start;
  padding:17px 2px 0;
}

.visual-card-caption>span{
  font-size:9px;
  opacity:.5;
}

.visual-card-caption h3{
  margin:0;
  font:400 25px "Italiana",serif;
}

.visual-card-caption p{
  margin:5px 0 0;
  font-size:9px;
  opacity:.52;
}

.visual-card-caption>b{
  font-size:19px;
  font-weight:300;
}


/* PRICING */

.pricing{
  padding:14vh 6vw;
  background:#11100f;
}

.pricing-intro{
  margin-bottom:7vh;
}

.pricing-intro h2{
  margin:0;
  font-size:clamp(55px,6.3vw,107px);
  font-weight:300;
  line-height:.88;
  letter-spacing:-.06em;
}

.pricing-intro h2 em{
  font-family:"Italiana",serif;
  font-weight:400;
}

.price-rows{
  border-top:1px solid rgba(255,255,255,.18);
}

.price-row{
  min-height:180px;
  padding:20px 0;
  display:grid;
  grid-template-columns:65px 1fr 220px 40px;
  gap:24px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:
    padding .4s,
    background .4s,
    color .4s;
}

.price-row:hover{
  padding-left:24px;
  background:rgba(255,255,255,.035);
}

.price-row.premium{
  margin:0 -20px;
  padding-left:20px;
  padding-right:20px;
  background:#e2d9ce;
  color:#151310;
}

.price-row.premium:hover{
  padding-left:42px;
}

.price-id{
  font-size:10px;
  opacity:.45;
}

.price-name h3{
  margin:0;
  font:400 clamp(35px,4vw,62px)/1 "Italiana",serif;
}

.price-name p{
  margin:10px 0 0;
  max-width:470px;
  font-size:11px;
  line-height:1.6;
  opacity:.52;
}

.price-amount{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.price-amount small{
  margin-bottom:5px;
  font-size:7px;
  letter-spacing:3px;
  opacity:.48;
}

.price-amount strong{
  font:400 43px "Italiana",serif;
}

.price-arrow{
  justify-self:end;
  font-size:22px;
}

.pricing-note{
  margin:24px 0 0;
  text-align:right;
  font-size:9px;
  opacity:.38;
}


/* CONTACT */

.contact{
  min-height:90vh;
  padding:13vh 6vw 45px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  background:
    radial-gradient(circle at 72% 43%,rgba(103,83,64,.22),transparent 35%),
    #080706;
}

.contact h2{
  margin:0;
  font-size:clamp(70px,8.5vw,145px);
  font-weight:300;
  line-height:.86;
  letter-spacing:-.065em;
}

.contact h2 em{
  font-family:"Italiana",serif;
  font-weight:400;
}

.contact-link{
  width:max-content;
  margin-top:45px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.45);
  font-size:13px;
}

.contact-link span{margin-left:25px}

.contact footer{
  position:absolute;
  left:6vw;
  right:6vw;
  bottom:35px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.footer-brand>span{font-size:26px}
.footer-brand small{font-size:6px}

.contact footer p{
  margin:0;
  font-size:7px;
  letter-spacing:3.4px;
  opacity:.45;
}


/* MOBILE */

@media(max-width:900px){

  .header{
    height:84px;
    padding:21px 6vw;
    grid-template-columns:1fr auto;
  }

  .header nav{display:none}

  .brand>span{font-size:31px}

  .brand small{
    margin-top:7px;
    font-size:6px;
    letter-spacing:3.8px;
  }

  .header-cta{
    padding:10px 13px;
    font-size:9px;
    gap:12px;
  }

  .hero{
    min-height:790px;
  }

  .hero-copy{
    left:6vw;
    top:15%;
    width:88vw;
  }

  .hero-copy h1{
    font-size:61px;
  }

  .hero-copy h2{
    max-width:80vw;
    font-size:43px;
  }

  .hero-meta{
    max-width:70vw;
    line-height:1.6;
  }

  .project-link{
    margin-top:26px;
  }

  .visual-stage{
    width:96vw;
    right:-24vw;
    top:57%;
  }

  .floating-note,
  .project-tabs,
  .hero-scroll{
    display:none;
  }

  .manifesto{
    min-height:55vh;
  }

  .manifesto h2{
    font-size:25vw;
  }

  .visual-projects{
    grid-template-columns:1fr;
    gap:55px;
  }

  .visual-card-screen{
    aspect-ratio:1.45;
  }

  .price-row{
    grid-template-columns:35px 1fr;
    gap:14px;
    padding:34px 0;
  }

  .price-amount{
    grid-column:2;
  }

  .price-arrow{
    display:none;
  }

  .price-row.premium{
    margin:0 -12px;
    padding:34px 12px;
  }

  .price-row.premium:hover{
    padding-left:12px;
  }

  .pricing-note{
    text-align:left;
    line-height:1.5;
  }

  .contact{
    min-height:76vh;
  }

  .contact footer p{
    display:none;
  }
}


/* ===== V3.1 DESKTOP HERO FIX ===== */
@media (min-width:901px){
  .hero-copy{
    left:6vw;
    top:24%;
    width:34vw;
  }

  .visual-stage{
    width:min(52vw,860px);
    right:6.5vw;
    top:23%;
  }

  .project-tabs{
    right:1.35vw;
    top:43%;
    width:76px;
  }

  .project-tabs button{
    width:76px;
  }

  .floating-note{
    top:-6%;
    right:2%;
  }

  .hero-scroll{
    right:2vw;
  }
}

@media (min-width:1500px){
  .visual-stage{
    width:min(50vw,900px);
    right:6vw;
  }
}

/* Hide horizontal overflow created by 3D transforms without cropping the laptop itself */
.hero{
  overflow:hidden;
}


/* ===== V3.2 MOBILE HERO FIX ===== */
@media (max-width:900px){

  .hero{
    height:100svh;
    min-height:700px;
    overflow:hidden;
  }

  .hero-copy{
    top:15%;
    left:6vw;
    width:88vw;
    z-index:10;
  }

  .project-count{
    margin-bottom:22px;
  }

  .hero-copy .eyebrow{
    margin-bottom:17px;
  }

  .hero-copy h1{
    font-size:clamp(48px,14vw,64px);
    line-height:.9;
  }

  .hero-copy h2{
    margin-top:5px;
    font-size:clamp(35px,10.5vw,46px);
    line-height:.88;
  }

  .hero-meta{
    font-size:7px;
    letter-spacing:3px;
  }

  .project-link{
    margin-top:24px;
  }

  .circle-arrow{
    width:50px;
    height:50px;
  }

  /*
   * On mobile the laptop becomes a centered visual,
   * rather than a desktop element pushed off-canvas.
   */
  .visual-stage{
    top:auto;
    bottom:5.5vh;
    left:50%;
    right:auto;
    width:88vw;
    transform:translateX(-50%);
    perspective:1200px;
  }

  .device-wrap{
    width:100%;
    transform:none !important;
  }

  .device{
    width:100%;
    transform:rotateY(-3deg) rotateX(2deg) rotateZ(.2deg) !important;
  }

  .screen-shell{
    padding:7px;
    border-radius:14px 14px 7px 7px;
  }

  .browser-ui{
    height:18px;
    padding:0 8px;
  }

  .browser-ui span{
    width:4px;
    height:4px;
  }

  .browser-ui i{
    padding-right:22px;
    font-size:5px;
  }

  .screen-viewport{
    aspect-ratio:16/9;
  }

  .device-base{
    height:17px;
  }

  .floating-note,
  .project-tabs,
  .hero-scroll{
    display:none;
  }
}

@media (max-width:520px){
  .header{
    padding-left:5.5vw;
    padding-right:5.5vw;
  }

  .hero-copy{
    left:5.5vw;
    width:89vw;
  }

  .hero-copy h1{
    font-size:12.5vw;
  }

  .hero-copy h2{
    font-size:9.5vw;
  }

  .hero-meta{
    max-width:82vw;
    line-height:1.55;
  }

  .visual-stage{
    width:90vw;
    bottom:4.5vh;
  }
}

@media (max-height:720px) and (max-width:900px){
  .hero-copy{
    top:13%;
  }

  .project-count{
    margin-bottom:14px;
  }

  .hero-copy .eyebrow{
    margin-bottom:12px;
  }

  .hero-copy h1{
    font-size:45px;
  }

  .hero-copy h2{
    font-size:34px;
    margin-bottom:15px;
  }

  .project-link{
    margin-top:17px;
  }

  .visual-stage{
    width:72vw;
    bottom:2.5vh;
  }
}


/* ===== V4 DESIGN / BRANDING ===== */

.design-services{
  padding:14vh 5vw 15vh;
  background:#e8e1d8;
  color:#11100f;
}

.design-intro{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  column-gap:7vw;
  align-items:end;
  margin-bottom:8vh;
}

.design-intro .eyebrow{
  grid-column:1 / -1;
}

.design-intro h2{
  margin:0;
  font-size:clamp(64px,7vw,118px);
  font-weight:300;
  line-height:.86;
  letter-spacing:-.06em;
}

.design-intro h2 em{
  font-family:"Italiana",serif;
  font-weight:400;
}

.design-lead{
  max-width:560px;
  margin:0 0 8px;
  font-size:14px;
  line-height:1.75;
  opacity:.62;
}

.design-wall{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
}

.design-tile{
  position:relative;
  min-height:500px;
  padding:28px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#141311;
  color:#f7f3ee;
}

.design-tile.guidelines{
  background:#d8cec1;
  color:#171411;
}

.design-tile.publish{
  background:#b4a18d;
}

.design-tile.print{
  background:#24211e;
}

.tile-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:2;
}

.tile-top span,
.tile-top small{
  font-size:8px;
  letter-spacing:3px;
  opacity:.6;
}

.tile-bottom{
  margin-top:auto;
  position:relative;
  z-index:2;
}

.tile-bottom h3{
  margin:0 0 7px;
  font:400 clamp(31px,3vw,48px)/1 "Italiana",serif;
}

.tile-bottom span{
  font-size:9px;
  letter-spacing:1.2px;
  opacity:.55;
}

.identity-mark{
  position:absolute;
  right:-2%;
  top:3%;
  font:400 clamp(260px,31vw,520px)/1 "Italiana",serif;
  opacity:.08;
  transform:rotate(7deg);
}

.guideline-art{
  position:absolute;
  inset:18% 8% 20%;
  display:grid;
  place-items:center;
}

.guideline-art b{
  font:400 clamp(130px,15vw,250px)/1 "Italiana",serif;
}

.guideline-art i{
  position:absolute;
  height:1px;
  width:100%;
  background:currentColor;
  opacity:.14;
}

.guideline-art i:nth-of-type(1){top:20%}
.guideline-art i:nth-of-type(2){top:50%}
.guideline-art i:nth-of-type(3){top:80%}

.social-art{
  position:absolute;
  inset:17% 8% 22%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  transform:rotate(-4deg);
}

.social-art div{
  width:29%;
  aspect-ratio:4/5;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
  font:400 clamp(14px,2vw,28px) "Italiana",serif;
  box-shadow:0 25px 40px rgba(0,0,0,.12);
}

.social-art div:nth-child(2){
  transform:translateY(-20px);
  background:#eee7df;
  color:#181512;
}

.print-art{
  position:absolute;
  inset:18% 10% 22%;
}

.print-art div{
  position:absolute;
  width:58%;
  aspect-ratio:1.7;
  padding:22px;
  display:flex;
  align-items:flex-end;
  box-shadow:0 30px 55px rgba(0,0,0,.28);
  font-family:"Italiana",serif;
}

.card-one{
  top:10%;
  left:7%;
  background:#e7ded3;
  color:#181512;
  font-size:35px;
  transform:rotate(-8deg);
}

.card-two{
  right:5%;
  bottom:7%;
  background:#0d0c0b;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-size:20px;
  transform:rotate(8deg);
}


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

.site-footer{
  padding:9vh 5vw 28px;
  background:#050505;
  color:#f6f2ed;
  border-top:1px solid rgba(255,255,255,.1);
}

.footer-main{
  display:grid;
  grid-template-columns:2.1fr .65fr .85fr 1fr;
  gap:5vw;
  padding-bottom:9vh;
}

.footer-logo{
  margin-bottom:45px;
}

.footer-logo>span{
  font-size:48px;
}

.footer-statement h3{
  margin:0;
  font-size:clamp(34px,3.6vw,61px);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:300;
}

.footer-statement h3 em{
  font-family:"Italiana",serif;
  font-weight:400;
}

.footer-column{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;
  padding-top:7px;
  font-size:11px;
}

.footer-column>a{
  transition:.25s;
}

.footer-column>a:hover{
  opacity:.55;
}

.footer-label{
  margin-bottom:14px;
  font-size:7px;
  letter-spacing:3px;
  opacity:.4;
}

.footer-column>span:not(.footer-label){
  opacity:.58;
}

.footer-contact>a{
  font:400 20px "Italiana",serif;
}

.footer-contact p{
  max-width:230px;
  margin:12px 0 0;
  font-size:10px;
  line-height:1.6;
  opacity:.45;
}

.footer-bottom{
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.11);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  font-size:7px;
  letter-spacing:2px;
  opacity:.45;
}

.footer-bottom a{
  justify-self:end;
}

@media(max-width:900px){
  .design-intro{
    grid-template-columns:1fr;
  }

  .design-lead{
    margin-top:30px;
  }

  .design-wall{
    grid-template-columns:1fr;
  }

  .design-tile{
    min-height:430px;
  }

  .footer-main{
    grid-template-columns:1fr 1fr;
    row-gap:55px;
  }

  .footer-statement{
    grid-column:1 / -1;
  }

  .footer-contact{
    grid-column:1 / -1;
  }

  .footer-bottom{
    grid-template-columns:1fr;
    gap:12px;
  }

  .footer-bottom a{
    justify-self:start;
  }
}

@media(max-width:520px){
  .design-services{
    padding-left:5.5vw;
    padding-right:5.5vw;
  }

  .design-intro h2{
    font-size:17vw;
  }

  .design-tile{
    min-height:390px;
    padding:22px;
  }

  .design-wall{
    gap:9px;
  }

  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:45px 25px;
  }

  .footer-statement{
    grid-column:1 / -1;
  }

  .footer-contact{
    grid-column:1 / -1;
  }

  .footer-logo>span{
    font-size:39px;
  }
}


/* =========================================================
   V4.1 — CLEANER TYPOGRAPHY + STABLE HERO
   ========================================================= */

/* Less decorative: DM Sans becomes the main display face */
.hero-copy h1,
.hero-copy h2,
.manifesto h2,
.section-heading h2,
.design-intro h2,
.tile-bottom h3,
.contact h2,
.footer-statement h3,
.footer-contact>a{
  font-family:"DM Sans",sans-serif;
  font-style:normal;
}

.hero-copy h1{
  font-weight:500;
  letter-spacing:-.065em;
}

.hero-copy h2,
.section-heading h2,
.design-intro h2,
.contact h2,
.footer-statement h3{
  font-weight:300;
}

.hero-copy h2 em,
.section-heading h2 em,
.design-intro h2 em,
.contact h2 em,
.footer-statement h3 em{
  font-family:"DM Sans",sans-serif;
  font-style:normal;
  font-weight:300;
}

.manifesto h2{
  font-weight:300;
  letter-spacing:-.065em;
}

.tile-bottom h3{
  font-weight:400;
  letter-spacing:-.04em;
}

/* Keep the KYNY logo distinctive */
.brand>span,
.footer-logo>span{
  font-family:"Italiana",serif;
}


/* ---------- DESKTOP HERO: no overlap / no off-screen laptop ---------- */

@media (min-width:901px){
  .hero{
    min-height:720px;
  }

  .hero-copy{
    left:5.5vw;
    top:22%;
    width:35vw;
  }

  .hero-copy h1{
    font-size:clamp(58px,5.8vw,96px);
  }

  .hero-copy h2{
    font-size:clamp(36px,3.45vw,58px);
    line-height:.94;
    letter-spacing:-.055em;
  }

  .visual-stage{
    top:24%;
    right:7.5vw;
    width:min(50vw,820px);
  }

  .device{
    transform:rotateY(-5deg) rotateX(2deg) rotateZ(.2deg);
  }

  .project-tabs{
    right:1.4vw;
    top:45%;
  }

  .floating-note{
    display:none;
  }
}


/* ---------- MOBILE HERO: stacked and stable ---------- */

@media (max-width:900px){
  .hero{
    height:auto;
    min-height:100svh;
    padding:125px 5.5vw 42px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .hero-copy{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    z-index:10;
    transform:none !important;
    opacity:1 !important;
  }

  .project-count{
    margin-bottom:20px;
  }

  .hero-copy .eyebrow{
    margin-bottom:15px;
  }

  .hero-copy h1{
    font-size:clamp(48px,13vw,62px);
    line-height:.9;
  }

  .hero-copy h2{
    max-width:92%;
    margin:8px 0 18px;
    font-size:clamp(34px,9.5vw,44px);
    line-height:.93;
    letter-spacing:-.055em;
  }

  .hero-meta{
    max-width:90%;
    font-size:7px;
    line-height:1.6;
  }

  .project-link{
    margin-top:22px;
  }

  .circle-arrow{
    width:48px;
    height:48px;
  }

  .visual-stage{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:100%;
    margin:38px auto 0;
    transform:none;
    perspective:none;
  }

  .device-wrap{
    width:100%;
    transform:none !important;
  }

  .device{
    width:100%;
    transform:none !important;
  }

  .screen-shell{
    padding:6px;
    border-radius:13px 13px 7px 7px;
  }

  .screen-viewport{
    aspect-ratio:16/9;
  }

  .device-base{
    width:103%;
    margin-left:-1.5%;
    height:15px;
  }

  .floating-note,
  .project-tabs,
  .hero-scroll{
    display:none;
  }
}

@media (max-width:520px){
  .header{
    padding:20px 5.5vw;
  }

  .header-cta{
    font-size:8px;
  }

  .hero{
    padding-top:118px;
  }

  .hero-copy h1{
    font-size:12.5vw;
  }

  .hero-copy h2{
    font-size:9.2vw;
  }

  .visual-stage{
    margin-top:30px;
  }

  .design-intro h2{
    font-size:15vw;
    line-height:.9;
  }

  .contact h2{
    font-size:15vw;
    line-height:.9;
  }
}


/* =========================================================
   V4.2 — CONTACT FORM
   ========================================================= */

.contact-form-section{
  min-height:auto;
  padding:14vh 5vw 12vh;
  display:block;
  background:
    radial-gradient(circle at 85% 30%,rgba(106,89,73,.16),transparent 28%),
    #090807;
}

.contact-head{
  display:grid;
  grid-template-columns:1.45fr .7fr;
  gap:8vw;
  align-items:end;
  margin-bottom:8vh;
}

.contact-head h2{
  margin:0;
  font-size:clamp(64px,7.4vw,124px);
  font-weight:300;
  line-height:.87;
  letter-spacing:-.065em;
}

.contact-intro{
  max-width:430px;
  margin:0 0 10px;
  font-size:13px;
  line-height:1.75;
  opacity:.55;
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.45fr);
  gap:12px;
}

.kyny-form{
  padding:42px;
  background:#e7dfd5;
  color:#141210;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.kyny-form label{
  display:flex;
  flex-direction:column;
}

.kyny-form label>span,
.kyny-form legend{
  margin-bottom:11px;
  font-size:8px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  opacity:.52;
}

.kyny-form input,
.kyny-form textarea{
  width:100%;
  padding:13px 0 15px;
  border:0;
  border-bottom:1px solid rgba(20,18,16,.25);
  border-radius:0;
  outline:0;
  background:transparent;
  color:#141210;
  font:400 15px "DM Sans",sans-serif;
  transition:border-color .25s;
}

.kyny-form input:focus,
.kyny-form textarea:focus{
  border-color:#141210;
}

.kyny-form input::placeholder,
.kyny-form textarea::placeholder{
  color:rgba(20,18,16,.35);
}

.kyny-form fieldset{
  margin:48px 0 45px;
  padding:0;
  border:0;
}

.kyny-form legend{
  padding:0;
}

.project-choices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.project-choices label{
  display:block;
  cursor:pointer;
}

.project-choices input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.project-choices label>span{
  display:block;
  margin:0;
  padding:11px 16px;
  border:1px solid rgba(20,18,16,.22);
  border-radius:100px;
  font-size:10px;
  letter-spacing:0;
  text-transform:none;
  opacity:1;
  transition:.25s;
}

.project-choices input:checked + span{
  background:#141210;
  border-color:#141210;
  color:#fff;
}

.message-field textarea{
  min-height:125px;
  resize:vertical;
}

.form-bottom{
  margin-top:35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.form-bottom p{
  max-width:390px;
  margin:0;
  font-size:9px;
  line-height:1.55;
  opacity:.48;
}

.form-bottom button{
  flex:none;
  padding:14px 19px 14px 22px;
  display:flex;
  align-items:center;
  gap:25px;
  border:0;
  border-radius:100px;
  background:#141210;
  color:#fff;
  cursor:pointer;
  font-size:11px;
  transition:.3s;
}

.form-bottom button i{
  font-style:normal;
  font-size:16px;
}

.form-bottom button:hover{
  transform:translateY(-2px);
}

.contact-side{
  min-height:520px;
  padding:34px;
  display:flex;
  flex-direction:column;
  background:#171513;
  border:1px solid rgba(255,255,255,.08);
}

.contact-side-number{
  font-size:10px;
  letter-spacing:2px;
  opacity:.4;
}

.contact-side-copy{
  margin:auto 0;
}

.contact-side-copy>span,
.contact-side-note>span{
  display:block;
  margin-bottom:15px;
  font-size:7px;
  letter-spacing:3px;
  opacity:.4;
}

.contact-side-copy a{
  font-size:clamp(20px,2vw,29px);
  font-weight:300;
  letter-spacing:-.04em;
}

.contact-side-note{
  margin-top:auto;
}

.contact-side-note p{
  margin:0;
  font-size:9px;
  line-height:1.6;
  opacity:.48;
}

/* The old mini footer no longer exists in contact */
.mini-footer{display:none!important}

@media(max-width:900px){
  .contact-form-section{
    padding:12vh 5.5vw 10vh;
  }

  .contact-head{
    grid-template-columns:1fr;
    gap:28px;
    margin-bottom:50px;
  }

  .contact-head h2{
    font-size:15vw;
    line-height:.9;
  }

  .contact-layout{
    grid-template-columns:1fr;
  }

  .kyny-form{
    padding:30px 24px;
  }

  .contact-side{
    min-height:280px;
  }
}

@media(max-width:600px){
  .form-row{
    grid-template-columns:1fr;
    gap:28px;
  }

  .kyny-form fieldset{
    margin:38px 0;
  }

  .project-choices label>span{
    padding:10px 13px;
    font-size:9px;
  }

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

  .form-bottom button{
    width:100%;
    justify-content:space-between;
  }
}


/* =========================================================
   V4.3 — CLIENT-BASED PROJECT GALLERY
   ========================================================= */

.client-projects{
  padding:14vh 5vw 15vh;
  background:#e8e1d8;
  color:#11100f;
}

.client-projects-head{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:7vw;
  align-items:end;
  margin-bottom:7vh;
}

.client-projects-head h2{
  margin:0;
  font-size:clamp(62px,6.6vw,112px);
  line-height:.88;
  font-weight:300;
  letter-spacing:-.065em;
}

.client-projects-head h2 span{
  font-weight:500;
}

.client-projects-head>p{
  max-width:430px;
  margin:0 0 8px;
  font-size:12px;
  line-height:1.75;
  opacity:.55;
}

.client-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.client-card{
  appearance:none;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  min-width:0;
}

.client-card-wide{
  grid-column:span 2;
}

.client-cover{
  position:relative;
  overflow:hidden;
  aspect-ratio:1.35;
  background:#cfc5b9;
}

.client-card-wide .client-cover{
  aspect-ratio:2.15;
}

.client-cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.16),transparent 34%);
}

.client-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}

.client-card:hover .client-cover img{
  transform:scale(1.025);
}

.client-card-meta{
  padding:16px 2px 28px;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:20px;
  align-items:start;
}

.client-card-meta>div{
  display:flex;
  gap:14px;
  align-items:baseline;
}

.client-card-meta span{
  font-size:9px;
  opacity:.45;
}

.client-card-meta h3{
  margin:0;
  font-size:22px;
  font-weight:500;
  letter-spacing:-.04em;
}

.client-card-meta p{
  margin:5px 0 0;
  font-size:9px;
  opacity:.5;
}

.client-card-meta b{
  font-size:19px;
  font-weight:300;
}


/* MODAL */

.project-modal{
  position:fixed;
  inset:0;
  z-index:200;
  overflow:auto;
  background:#0a0908;
  color:#f6f2ed;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s,visibility .35s;
}

.project-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.project-modal-close{
  position:fixed;
  z-index:205;
  top:24px;
  right:30px;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(8,8,8,.55);
  color:white;
  backdrop-filter:blur(12px);
  font-size:27px;
  font-weight:300;
  cursor:pointer;
}

.project-modal-shell{
  width:min(1500px,92vw);
  margin:auto;
  padding:11vh 0 7vh;
}

.project-modal-head{
  display:grid;
  grid-template-columns:1fr .65fr;
  gap:8vw;
  align-items:end;
  margin-bottom:7vh;
}

.project-modal-head h2{
  margin:0;
  font-size:clamp(62px,8vw,128px);
  line-height:.86;
  letter-spacing:-.07em;
  font-weight:400;
}

.project-modal-head>p{
  max-width:470px;
  margin:0 0 8px;
  font-size:12px;
  line-height:1.75;
  opacity:.55;
}

.project-modal-gallery{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:10px;
}

.project-shot{
  grid-column:span 6;
  overflow:hidden;
  min-height:320px;
  background:#181716;
}

.project-shot.wide{
  grid-column:span 12;
}

.project-shot.tall{
  grid-column:span 5;
}

.project-shot.tall + .project-shot{
  grid-column:span 7;
}

.project-shot img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  display:block;
}

.project-modal-foot{
  margin-top:5vh;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.project-modal-foot>span{
  max-width:650px;
  font-size:8px;
  letter-spacing:2.5px;
  line-height:1.6;
  opacity:.45;
}

.project-modal-foot button{
  border:0;
  background:none;
  color:#fff;
  display:flex;
  align-items:center;
  gap:15px;
  cursor:pointer;
  font:400 12px "DM Sans",sans-serif;
}

.project-modal-foot button b{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:300;
}

body.modal-open{
  overflow:hidden;
}


@media(max-width:900px){

  .client-projects{
    padding:11vh 5.5vw 12vh;
  }

  .client-projects-head{
    grid-template-columns:1fr;
    gap:28px;
  }

  .client-projects-head h2{
    font-size:15vw;
  }

  .client-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .client-card-wide{
    grid-column:auto;
  }

  .client-cover,
  .client-card-wide .client-cover{
    aspect-ratio:1.35;
  }

  .client-card-meta{
    grid-template-columns:1fr auto;
  }

  .client-card-meta p{
    grid-column:1;
  }

  .client-card-meta b{
    grid-column:2;
    grid-row:1 / span 2;
  }

  .project-modal-shell{
    width:89vw;
    padding-top:95px;
  }

  .project-modal-head{
    grid-template-columns:1fr;
    gap:25px;
  }

  .project-modal-head h2{
    font-size:17vw;
  }

  .project-modal-gallery{
    display:block;
  }

  .project-shot,
  .project-shot.wide,
  .project-shot.tall,
  .project-shot.tall + .project-shot{
    min-height:0;
    margin-bottom:9px;
  }

  .project-shot img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .project-modal-foot{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* V4.4 — compact client gallery */
@media (min-width:901px){
  .client-projects{padding:10vh 5vw 11vh;}
  .client-projects-head{margin-bottom:4.5vh;}
  .client-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .client-card-wide{grid-column:span 1;}
  .client-cover,.client-card-wide .client-cover{aspect-ratio:1.55;max-height:260px;}
  .client-card-meta{padding:12px 2px 22px;}
  .client-card-meta h3{font-size:18px;}
}
@media (max-width:900px){
  .client-projects{padding:9vh 5.5vw 10vh;}
  .client-cover,.client-card-wide .client-cover{aspect-ratio:1.65;}
  .client-card-meta{padding:12px 2px 22px;}
}

/* V4.6 — balanced studio gallery */
@media (min-width: 901px){
  .client-projects{padding:10vh 6vw 12vh;}
  .client-projects-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:5vh;gap:4vw;}
  .client-projects-head h2{font-size:clamp(44px,4.4vw,72px);line-height:.95;letter-spacing:-.055em;}
  .client-projects-head>p{max-width:360px;font-size:11px;line-height:1.65;margin-bottom:3px;}
  .client-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 20px;}
  .client-card-wide{grid-column:span 1;}
  .client-cover,.client-card-wide .client-cover{aspect-ratio:1.55;max-height:none;border-radius:2px;}
  .client-card-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:11px 1px 0;}
  .client-card-meta>div{gap:9px;}
  .client-card-meta span{font-size:8px;}
  .client-card-meta h3{font-size:15px;letter-spacing:-.025em;}
  .client-card-meta p{font-size:8px;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
  .client-card-meta b{font-size:14px;}
}
@media (min-width: 901px) and (max-width: 1250px){
  .client-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
  .client-projects{padding:9vh 5.5vw 10vh;}
  .client-projects-head{display:block;margin-bottom:4vh;}
  .client-projects-head h2{font-size:clamp(42px,13vw,64px);}
  .client-projects-head>p{margin-top:18px;max-width:320px;}
  .client-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;}
  .client-card-wide{grid-column:span 1;}
  .client-cover,.client-card-wide .client-cover{aspect-ratio:1.35;}
  .client-card-meta{display:block;padding:10px 1px 0;}
  .client-card-meta h3{font-size:16px;}
  .client-card-meta p{font-size:8px;}
  .client-card-meta b{display:none;}
}
@media (max-width:560px){
  .client-grid{grid-template-columns:1fr;gap:28px;}
  .client-cover,.client-card-wide .client-cover{aspect-ratio:1.65;}
}

/* V4.7 — HERO FOCUS */
.hero{min-height:720px;background-color:#0b0a09}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 43%,rgba(0,0,0,.12));z-index:1}
.hero-copy{top:22%;width:36vw}
.hero-copy h1{font-family:"DM Sans",sans-serif;font-weight:400;font-size:clamp(58px,6.2vw,104px);letter-spacing:-.065em;line-height:.92}
.hero-copy h2{font-size:clamp(34px,3.7vw,62px);line-height:.95;max-width:560px}
.hero-copy h2 em{font-family:"DM Sans",sans-serif;font-style:normal;font-weight:300}
.visual-stage{right:4vw;top:18%;width:min(58vw,980px)}
.device-wrap{display:block;color:inherit;text-decoration:none;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.device-wrap:hover{transform:translateY(-6px)}
.screen-shell{border-radius:18px 18px 9px 9px;box-shadow:0 65px 130px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.06)}
.screen-viewport{aspect-ratio:16/9.2}
.device-base{height:31px}
.hero-actions{display:flex;align-items:center;gap:26px;margin-top:38px}
.hero-actions .project-link{margin-top:0;text-decoration:none}
.next-project{opacity:.62}.next-project:hover{opacity:1}
.floating-note{top:-1%;right:5%;font-family:"DM Sans",sans-serif;font-style:normal;font-size:11px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;opacity:.38;transform:none}
.manifesto{min-height:48vh;padding:8vh 6vw}
.manifesto h2{font-family:"DM Sans",sans-serif;font-weight:300;font-size:clamp(64px,8vw,128px);letter-spacing:-.065em}
@media(max-width:900px){
 .hero{height:auto;min-height:100svh;padding:120px 24px 46px;display:flex;flex-direction:column}
 .hero-copy{position:relative;left:auto;top:auto;width:100%;order:1}
 .hero-copy h1{font-size:clamp(50px,15vw,78px)}
 .hero-copy h2{font-size:clamp(32px,9vw,48px);max-width:420px}
 .visual-stage{position:relative;right:auto;top:auto;width:112%;margin:42px 0 0 -6%;order:2}
 .device{transform:rotateY(-2deg) rotateX(1deg) rotateZ(.2deg)!important}
 .hero-actions{gap:18px;flex-wrap:wrap}.circle-arrow{width:50px;height:50px}
 .floating-note{display:none}.manifesto{min-height:40vh}
}
@media(max-width:520px){.hero{padding-left:20px;padding-right:20px}.visual-stage{width:116%;margin-left:-8%}.hero-meta{letter-spacing:2.5px}.hero-actions{margin-top:28px}}


/* =========================================================
   V4.8 — KYNY INTRO / POSITIONING HERO
   ========================================================= */

.intro-hero{
  position:relative;
  min-height:100svh;
  padding:0 5.5vw;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 74% 42%,rgba(109,88,70,.20),transparent 31%),
    radial-gradient(circle at 18% 77%,rgba(88,75,63,.12),transparent 27%),
    #090807;
  color:#f7f3ee;
}

.intro-grid{
  position:absolute;
  inset:0;
  opacity:.065;
  background-image:
    linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);
  background-size:82px 82px;
  mask-image:linear-gradient(to bottom,transparent 3%,black 25%,black 75%,transparent 98%);
}

.intro-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
  opacity:.16;
}

.intro-orb-one{
  width:520px;
  height:520px;
  right:8%;
  top:12%;
  background:#a98c72;
}

.intro-orb-two{
  width:380px;
  height:380px;
  left:-8%;
  bottom:-7%;
  background:#67594d;
}

.intro-content{
  position:relative;
  z-index:3;
  width:100%;
  padding-top:55px;
}

.intro-kicker{
  margin:0 0 33px;
  font-size:9px;
  letter-spacing:4.6px;
  opacity:.55;
}

.intro-title{
  max-width:1120px;
  margin:0;
  display:flex;
  flex-direction:column;
  font:300 clamp(70px,8.5vw,148px)/.84 "DM Sans",sans-serif;
  letter-spacing:-.078em;
}

.intro-title span{
  display:block;
  overflow:hidden;
}

.intro-title b{
  display:inline-block;
  font-weight:500;
  transition:opacity .3s;
}

.intro-title span:nth-child(2){
  padding-left:9vw;
}

.intro-title span:nth-child(3){
  padding-left:18vw;
}

.intro-bottom{
  margin-top:55px;
  padding-left:18.3vw;
  display:flex;
  align-items:center;
  gap:55px;
}

.intro-bottom>p{
  margin:0;
  font-size:11px;
  letter-spacing:.3px;
  opacity:.55;
}

.intro-bottom>p i{
  padding:0 8px;
  font-style:normal;
  opacity:.4;
}

.intro-cta{
  padding:12px 14px 12px 21px;
  display:flex;
  align-items:center;
  gap:28px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:100px;
  font-size:11px;
  transition:.3s;
}

.intro-cta b{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f4eee8;
  color:#111;
  font-size:14px;
  font-weight:400;
}

.intro-cta:hover{
  background:#f4eee8;
  color:#111;
}

.intro-discover{
  position:absolute;
  z-index:4;
  left:5.5vw;
  bottom:37px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:8px;
  letter-spacing:2px;
  opacity:.5;
}

.intro-discover i{
  font-style:normal;
  font-size:15px;
}

.intro-index{
  position:absolute;
  z-index:4;
  right:5.5vw;
  bottom:39px;
  display:flex;
  gap:25px;
  font-size:7px;
  letter-spacing:2.5px;
  opacity:.32;
}

/* Existing project hero becomes the proof / work hero */
.hero{
  border-top:1px solid rgba(255,255,255,.08);
}

@media(max-width:900px){
  .intro-hero{
    min-height:100svh;
    padding:110px 5.5vw 90px;
    align-items:center;
  }

  .intro-content{
    padding-top:0;
  }

  .intro-kicker{
    margin-bottom:25px;
    font-size:7px;
    letter-spacing:3.5px;
  }

  .intro-title{
    font-size:clamp(54px,16vw,94px);
    line-height:.89;
    letter-spacing:-.075em;
  }

  .intro-title span:nth-child(2),
  .intro-title span:nth-child(3){
    padding-left:0;
  }

  .intro-bottom{
    margin-top:42px;
    padding-left:0;
    align-items:flex-start;
    flex-direction:column;
    gap:28px;
  }

  .intro-bottom>p{
    max-width:330px;
    line-height:1.7;
  }

  .intro-index{
    display:none;
  }
}

@media(max-width:520px){
  .intro-hero{
    padding-top:105px;
    padding-bottom:82px;
  }

  .intro-title{
    font-size:15vw;
    line-height:.91;
  }

  .intro-bottom{
    margin-top:34px;
  }

  .intro-bottom>p i{
    padding:0 4px;
  }

  .intro-cta{
    width:100%;
    justify-content:space-between;
  }

  .intro-discover{
    bottom:25px;
  }
}

/* Official KYNY logo — preserve source proportions */
.brand-image{display:block;width:74px;height:auto;line-height:0;overflow:hidden}
.brand-image img{display:block;width:100%;height:auto;object-fit:contain}
@media (max-width:900px){.brand-image{width:62px}}


/* V5.2 — production contact form */
.form-hp{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.form-status{
  min-height:20px;
  margin-top:24px;
  font-size:10px;
  line-height:1.5;
}
.form-status.is-success{opacity:.9}
.form-status.is-error{opacity:.72}
.form-bottom button:disabled{
  cursor:wait;
  opacity:.68;
  transform:none;
}


/* ===== V5.4 RESPONSIVE ARROWS + PRICING ===== */
.price-row{color:inherit;text-decoration:none}
.price-row:visited{color:inherit}
.price-arrow{display:grid;place-items:center;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;line-height:1;transition:transform .3s,background .3s,color .3s}
.price-row:hover .price-arrow{transform:rotate(45deg)}

@media (max-width: 760px){
  .pricing{padding:10vh 5vw}
  .pricing-intro{margin-bottom:5vh}
  .pricing-intro h2{font-size:clamp(48px,15vw,72px)}
  .price-row{grid-template-columns:28px minmax(0,1fr) auto;gap:10px;min-height:0;padding:28px 0}
  .price-name{min-width:0}
  .price-name h3{font-size:clamp(30px,9vw,42px)}
  .price-name p{font-size:10px;max-width:100%}
  .price-amount{grid-column:2;align-self:start}
  .price-amount strong{font-size:34px}
  .price-arrow{display:grid;grid-column:3;grid-row:1 / span 2;width:34px;height:34px;font-size:16px;align-self:center;justify-self:end}
  .price-row.premium{margin:0 -5vw;padding:28px 5vw}
  .price-row.premium:hover{padding-left:5vw}
  .project-link{max-width:100%;gap:12px}
  .circle-arrow{flex:0 0 46px;width:46px;height:46px;font-size:17px}
  .hero-actions{max-width:100%;gap:12px}
  .next-project{min-width:0}
}

@media (max-width: 390px){
  .circle-arrow{flex-basis:42px;width:42px;height:42px}
  .project-link>span:last-child{font-size:11px;white-space:nowrap}
  .price-row{grid-template-columns:24px minmax(0,1fr) 30px;gap:8px}
  .price-arrow{width:30px;height:30px;font-size:14px}
}


/* =========================================================
   V5.8 — VALUE + BRANDING
   ========================================================= */
.kyny-value{
  padding:110px 5.5vw 70px;
  background:#e7dfd5;
  color:#151310;
  border-bottom:1px solid rgba(20,18,16,.14);
}
.value-eyebrow{
  font-size:8px;
  letter-spacing:3.2px;
  opacity:.45;
  margin-bottom:45px;
}
.value-main{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(250px,.55fr);
  gap:8vw;
  align-items:end;
}
.value-main h2{
  margin:0;
  font-size:clamp(58px,7vw,112px);
  line-height:.86;
  letter-spacing:-.07em;
  font-weight:400;
}
.value-main h2 span{opacity:.38}
.value-main p{
  margin:0 0 8px;
  max-width:330px;
  font-size:12px;
  line-height:1.7;
  opacity:.58;
}
.value-tags{
  margin-top:70px;
  padding-top:18px;
  border-top:1px solid rgba(20,18,16,.16);
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.value-tags span{
  font-size:7px;
  letter-spacing:2.4px;
  opacity:.48;
}

.branding-section{
  position:relative;
  min-height:76vh;
  padding:110px 5.5vw;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  background:
    radial-gradient(circle at 72% 38%,rgba(151,125,101,.18),transparent 30%),
    #090807;
  color:#f5f0ea;
}
.branding-grid{
  position:absolute;
  inset:0;
  opacity:.055;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:80px 80px;
}
.branding-copy{position:relative;z-index:2}
.branding-kicker{
  margin:0 0 28px;
  font-size:8px;
  letter-spacing:3.5px;
  opacity:.45;
}
.branding-copy h2{
  margin:0;
  font-size:clamp(72px,9vw,145px);
  line-height:.78;
  letter-spacing:-.075em;
  font-weight:300;
}
.branding-copy h2 span{font-weight:500}
.branding-text{
  max-width:470px;
  margin:48px 0 30px;
  font-size:12px;
  line-height:1.75;
  opacity:.55;
}
.branding-link{
  display:inline-block;
  padding-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.4);
  font-size:10px;
  letter-spacing:.5px;
}
.branding-side{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:16px;
}
.branding-side span{
  font-size:9px;
  letter-spacing:4px;
  opacity:.32;
}
.pricing-included{
  margin:55px 5.5vw 0;
  padding:20px 0 0;
  border-top:1px solid rgba(20,18,16,.14);
  display:flex;
  justify-content:space-between;
  gap:30px;
}
.pricing-included span{
  font-size:7px;
  letter-spacing:2.4px;
  opacity:.42;
}
.pricing-included p{
  margin:0;
  font-size:10px;
  opacity:.55;
}

@media(max-width:820px){
  .kyny-value{padding:78px 5.5vw 55px}
  .value-eyebrow{margin-bottom:30px}
  .value-main{grid-template-columns:1fr;gap:30px}
  .value-main h2{font-size:15vw;line-height:.9}
  .value-main p{max-width:290px}
  .value-tags{margin-top:45px;justify-content:flex-start;gap:15px 22px}

  .branding-section{
    min-height:auto;
    padding:90px 5.5vw 80px;
    grid-template-columns:1fr;
    gap:65px;
  }
  .branding-copy h2{font-size:18vw;line-height:.84}
  .branding-text{margin-top:35px;max-width:330px}
  .branding-side{align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:12px 22px}
  .branding-side span{font-size:7px}
  .pricing-included{
    margin:40px 5.5vw 0;
    flex-direction:column;
    gap:12px;
  }
}


/* =========================================================
   V5.9 — HERO PORTFOLIO REFINEMENT
   Cleaner, larger and more centered project presentation
   ========================================================= */
@media (min-width: 901px){
  .hero{
    grid-template-columns:minmax(390px,.88fr) minmax(620px,1.22fr) !important;
  }
  .visual-stage{
    justify-content:center !important;
    padding-right:3vw !important;
    transform:translateX(-1.5vw);
  }
  .device-wrap{
    width:min(100%,980px) !important;
  }
  .device{
    width:100% !important;
    transform:rotateY(-1deg) rotateX(.5deg) rotateZ(0deg) !important;
  }
  .screen-shell{
    border-radius:16px 16px 8px 8px !important;
    box-shadow:0 48px 105px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.07) !important;
  }
  .screen-viewport{
    aspect-ratio:16/9 !important;
    background:#111;
  }
  .screen-viewport img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:top center !important;
  }
  .floating-note{
    right:2.5vw !important;
  }
}
@media (max-width:900px){
  .screen-viewport img{
    object-fit:cover !important;
    object-position:top center !important;
  }
}
\n\n/* =========================================================\n   V6.0 — MOBILE VIEWPORT HARD FIX\n   Prevents desktop-canvas shrinking / horizontal dezoom on phones\n   ========================================================= */\nhtml, body {\n  width:100%;\n  max-width:100%;\n  min-width:0;\n}\n\n@media (max-width:900px){\n  html{\n    width:100%;\n    max-width:100%;\n    overflow-x:hidden;\n    -webkit-text-size-adjust:100%;\n    text-size-adjust:100%;\n  }\n\n  body{\n    width:100%;\n    max-width:100%;\n    min-width:0;\n    overflow-x:hidden !important;\n    position:relative;\n    margin:0 !important;\n  }\n\n  main,\n  .header,\n  .intro-hero,\n  .hero,\n  .manifesto,\n  .design-services,\n  .client-projects,\n  .pricing,\n  .kyny-value,\n  .branding-section,\n  .contact,\n  footer{\n    width:100%;\n    max-width:100%;\n    min-width:0;\n  }\n\n  img, video, svg, canvas, iframe{\n    max-width:100%;\n  }\n\n  /* The portfolio device must never enlarge the document viewport. */\n  .visual-stage{\n    max-width:100vw !important;\n    left:auto;\n    right:auto;\n  }\n\n  .device-wrap, .device, .screen-shell{\n    max-width:100%;\n    min-width:0;\n  }\n}\n\n@media (max-width:520px){\n  .hero{\n    width:100% !important;\n    max-width:100% !important;\n    overflow:hidden !important;\n  }\n\n  /* Old rule used 116% and -8%; visually similar but caused a wider canvas. */\n  .hero .visual-stage{\n    width:100% !important;\n    max-width:100% !important;\n    margin:42px 0 0 !important;\n    transform:none !important;\n  }\n}\n