*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:#fef3e3;color:#5e3d2b;font-family:"DM Sans",sans-serif}a{text-decoration:none;color:inherit}.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;background:rgba(248,240,227,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(81,51,33,.12)}.brand img{width:155px;height:auto;display:block}.nav nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600}.nav nav a{opacity:.82}.nav nav a:hover{opacity:1}.nav-cta{padding:11px 17px;border:1px solid #5e3d2b;border-radius:999px}.menu{display:none;background:none;border:0;font-size:24px;color:#5e3d2b}.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:140px 8vw 80px;overflow:hidden}.hero-grid{pointer-events:none;position:absolute;inset:0;background:linear-gradient(rgba(81,51,33,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(81,51,33,.055) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,black,transparent)}.hero-copy{position:relative;z-index:2;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;margin:0 0 24px;color:#f58634}.hero h1{font:700 clamp(55px,9vw,132px)/.9 "Space Grotesk",sans-serif;letter-spacing:-.07em;margin:0;color:#5e3d2b}.hero h1 em{font-style:normal;color:#f58634}.hero-text{max-width:650px;font-size:18px;line-height:1.6;margin:36px 0;color:#74523d}.hero-actions{display:flex;gap:28px;align-items:center}.button{display:inline-flex;gap:16px;align-items:center;padding:16px 21px;border-radius:999px;font-weight:700;font-size:14px}.button-dark{background:#5e3d2b;color:#fef3e3}.button-light{border:1px solid #fef3e3;color:#fef3e3}.text-link{font-weight:700;font-size:14px}.hero-mark{position:absolute;right:7vw;bottom:9vh;font:700 18vw/.7 "Space Grotesk";letter-spacing:-.1em;color:rgba(244,125,44,.13);z-index:1}.hero-mark span{color:rgba(81,51,33,.09)}.scroll-note{position:absolute;right:5vw;top:50%;writing-mode:vertical-rl;font-size:10px;letter-spacing:.2em}.statement{padding:160px 10vw;background:#5e3d2b;color:#fef3e3}.statement .eyebrow{color:#f58634}.statement h2{font:600 clamp(42px,6vw,86px)/1.02 "Space Grotesk";letter-spacing:-.055em;max-width:1000px;margin:0}.statement h2 span{color:#f58634}.services,.work{padding:150px 8vw}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:70px}.section-head h2,.about h2,.contact h2{font:600 clamp(48px,7vw,96px)/.93 "Space Grotesk";letter-spacing:-.06em;margin:0}.section-head h2 span,.about h2 span,.contact h2 span{color:#f58634}.section-intro{max-width:400px;line-height:1.65;color:#795a43;margin:0}.service-list{border-top:1px solid rgba(81,51,33,.25)}.service{display:grid;grid-template-columns:70px 1fr 50px;gap:20px;padding:34px 0;border-bottom:1px solid rgba(81,51,33,.25);transition:.25s}.service:hover{padding-left:15px;background:rgba(244,125,44,.06)}.service .num,.project-meta span{font-size:11px;letter-spacing:.15em;color:#f58634;font-weight:700}.service h3{font:600 30px/1.1 "Space Grotesk";margin:0 0 10px}.service p{max-width:720px;margin:0;color:#795a43;line-height:1.55}.arrow{font-size:24px;text-align:right}.work{background:#f1e5d5}.work-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:28px}.project{display:block}.project-image{height:390px;background:#5e3d2b;position:relative;overflow:hidden}.project-image:after{content:"";position:absolute;inset:12%;border:1px solid rgba(248,240,227,.25);transform:rotate(-6deg)}.project-a .project-image{background:linear-gradient(135deg,#5e3d2b,#f58634)}.project-b .project-image{background:linear-gradient(135deg,#d8bca0,#5e3d2b)}.project-c .project-image{background:linear-gradient(135deg,#f58634,#e6cba8)}.project-d .project-image{background:linear-gradient(135deg,#5e3d2b,#8b6043)}.project-meta{display:grid;grid-template-columns:1fr auto;gap:6px 15px;padding:18px 0}.project-meta h3{grid-column:1/-1;font:600 32px "Space Grotesk";margin:0}.placeholder-note{font-size:12px;color:#8b6e57;margin-top:40px}.about{background:#f58634;color:#5e3d2b;padding:150px 8vw;display:grid;grid-template-columns:.35fr 1fr;gap:80px}.about h2{max-width:800px}.about p{font-size:19px;line-height:1.7;max-width:780px}.about .button{margin-top:20px;background:#5e3d2b}.process{padding:120px 8vw}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:55px}.process-grid div{border-top:1px solid rgba(81,51,33,.3);padding-top:20px}.process-grid span{color:#f58634;font-weight:700}.process-grid h3{font:600 40px "Space Grotesk";margin:55px 0 8px}.process-grid p{color:#795a43}.contact{padding:160px 8vw 100px;background:#5e3d2b;color:#fef3e3}.contact .eyebrow{color:#f58634}.contact-email{display:inline-flex;gap:25px;font:500 clamp(22px,3vw,42px) "Space Grotesk";margin-top:70px;border-bottom:1px solid rgba(248,240,227,.4);padding-bottom:12px}.contact-bottom{display:flex;justify-content:space-between;margin-top:140px;padding-top:20px;border-top:1px solid rgba(248,240,227,.2);font-size:12px;letter-spacing:.08em;text-transform:uppercase}footer{background:#5e3d2b;color:#fef3e3;border-top:1px solid rgba(248,240,227,.15);padding:25px 8vw;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase}@media(max-width:800px){.nav{padding:14px 5vw}.nav nav{display:none;position:absolute;top:68px;left:0;right:0;padding:25px 5vw;background:#fef3e3;flex-direction:column;align-items:flex-start}.nav nav.open{display:flex}.menu{display:block}.hero{padding:130px 7vw 80px}.hero h1{font-size:58px}.hero-text{font-size:16px}.scroll-note{display:none}.statement,.services,.work,.about,.process{padding:90px 7vw}.section-head{display:block}.section-intro{margin-top:25px}.service{grid-template-columns:42px 1fr 25px}.service h3{font-size:24px}.work-grid{grid-template-columns:1fr}.project-image{height:280px}.about{grid-template-columns:1fr;gap:35px}.process-grid{grid-template-columns:1fr 1fr}.process-grid h3{margin-top:35px}.contact{padding:100px 7vw 70px}.contact-bottom,footer{display:block}.contact-bottom p+ p,footer div+div{margin-top:10px}.contact-email{font-size:21px;word-break:break-all}.hero-mark{right:-5vw;bottom:20vh;font-size:40vw}}

.hero-logo-wrap{position:absolute;right:5vw;top:50%;transform:translateY(-42%);width:min(42vw,560px);z-index:1;display:flex;justify-content:center;align-items:center}
.hero-logo{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.section-logo{width:min(230px,75%);height:auto;display:block}
.footer-logo{width:135px;height:auto;display:block}
.contact-logo{width:180px;height:auto;display:block;margin:0}
.contact-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.whatsapp-button{display:inline-flex;gap:16px;align-items:center;padding:16px 21px;border-radius:999px;background:#25D366;color:#fff;font-weight:700;font-size:14px}
.whatsapp-link{border-color:#25D366}
@media(max-width:800px){
  .hero-logo-wrap{position:relative;right:auto;top:auto;transform:none;width:min(80vw,430px);margin:55px auto 0;order:3}
  .hero{display:flex;flex-direction:column;align-items:flex-start}
  .hero-copy{order:1}
  .hero-grid{z-index:0}
  .hero-logo-wrap{z-index:2}
  .section-logo{width:180px}
  .contact-logo{width:150px}
}

.hero-mark{display:none!important}


/* --- Persistent WhatsApp side button --- */
.whatsapp-side {
  position: fixed;
  z-index: 9998;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 12px 13px 10px;
  background: #5E3D2B;
  color: #FEF3E3;
  text-decoration: none;
  border-radius: 14px 0 0 14px;
  box-shadow: 0 10px 30px rgba(94,61,43,.18);
  font-size: 12px;
  letter-spacing: .04em;
  writing-mode: vertical-rl;
  transition: padding .25s ease, background .25s ease;
}
.whatsapp-side:hover {
  padding-right: 16px;
  background: #F58634;
  color: #FEF3E3;
}
.wa-icon {
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  writing-mode: horizontal-tb;
}
.wa-label { display:block; }

/* --- Chai cup line-art cursor --- */
@media (pointer: fine) {
  body, a, button, input, textarea, select { cursor: none !important; }
  .chai-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    z-index: 10000;
    pointer-events: none;
    transform: translate3d(-100px,-100px,0);
    will-change: transform;
  }
  .chai-cursor svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .chai-cup path {
    fill: none;
    stroke: #5E3D2B;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .chai-smoke path {
    fill: none;
    stroke: #F58634;
    stroke-width: 1.25;
    stroke-linecap: round;
    opacity: .75;
    stroke-dasharray: 18 30;
    animation: chaiSmoke 2.3s ease-in-out infinite;
  }
  .chai-smoke path:nth-child(2) {
    animation-delay: -.9s;
  }
  .chai-cursor.is-hover {
    transform-origin: 50% 50%;
  }
  .chai-cursor.is-hover .chai-cup {
    animation: chaiNudge .55s ease-in-out;
  }
  @keyframes chaiSmoke {
    0% { transform: translateY(3px); opacity: 0; }
    35% { opacity: .72; }
    100% { transform: translateY(-5px); opacity: 0; }
  }
  @keyframes chaiNudge {
    0%,100% { transform: rotate(0); }
    50% { transform: rotate(-5deg); }
  }
}
@media (pointer: coarse) {
  .chai-cursor { display:none; }
}
@media (max-width: 640px) {
  .whatsapp-side {
    padding: 11px 9px;
    border-radius: 12px 0 0 12px;
  }
  .wa-label { display:none; }
}

/* Native anchor targets for fixed header navigation */
section[id]{scroll-margin-top:105px}

/* Cursor hot-spot alignment: the mouse pointer sits at the upper-left anchor of the cup. */
@media (pointer: fine) {
  .chai-cursor {
    transform-origin: 0 0;
  }
  .chai-cursor svg {
    transform: translate(-1px, -1px);
  }
}

/* --- Universal clickable-element micro interaction --- */
@media (pointer: fine) {
  a[href]:not(.whatsapp-side), button, input, textarea, select, [role="button"] {
    transition:
      transform .28s cubic-bezier(.2,.8,.2,1),
      box-shadow .28s ease,
      opacity .28s ease;
  }

  a[href]:not(.whatsapp-side):hover, button:hover, input:hover, textarea:hover, select:hover, [role="button"]:hover {
    animation: clickableNudge .52s ease-in-out;
    transform: scale(1.035);
  }

  a[href]:focus-visible, button:focus-visible, input:focus-visible,
  textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible {
    transform: scale(1.025);
    outline: 2px solid #F58634;
    outline-offset: 4px;
  }

  @keyframes clickableNudge {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.04) rotate(-0.45deg); }
    50%  { transform: scale(1.045) rotate(0.45deg); }
    75%  { transform: scale(1.038) rotate(-0.2deg); }
    100% { transform: scale(1.035) rotate(0); }
  }

  /* Don't scale the floating WhatsApp tab or custom cursor itself. */
  .whatsapp-side:hover {
    transform: translateY(-50%);
  }
  .chai-cursor,
  .chai-cursor:hover {
    animation: none !important;
  }
}

/* --- Top-right navigation emphasis --- */
@media (pointer: fine) {
  .nav nav a:hover {
    transform: scale(1.10);
  }

  /* Only the screen-right floating WhatsApp button is exempt from shake. */
  .whatsapp-side:hover {
    animation: none !important;
    transform: translateY(-50%) scale(1.02);
  }
}

/* Floating screen-right WhatsApp: intentionally NO zoom, shake, or wiggle. */
@media (pointer: fine) {
  a.whatsapp-side,
  a.whatsapp-side:hover,
  a.whatsapp-side:focus,
  a.whatsapp-side:active,
  a.whatsapp-side .wa-icon,
  a.whatsapp-side .wa-label {
    animation: none !important;
  }

  a.whatsapp-side {
    transform: translateY(-50%) !important;
  }

  a.whatsapp-side:hover,
  a.whatsapp-side:focus,
  a.whatsapp-side:active {
    transform: translateY(-50%) !important;
  }
}