/* FUTURISE — futurise.co.in · house brand, static, zero-JS */

/* ---- fonts ---- */
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Regular.woff2") format("woff2");  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Medium.woff2") format("woff2");   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Bold.woff2") format("woff2");     font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-ExtraBold.woff2") format("woff2");font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Black.woff2") format("woff2");    font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-Italic.woff2") format("woff2");        font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-MediumItalic.woff2") format("woff2");  font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-SemiBoldItalic.woff2") format("woff2");font-weight:600; font-style:italic; font-display:swap; }

:root{
  --yellow:#FFC20E; --black:#000; --white:#fff;
  --graphite:#414042; --slate:#58595B; --grey:#E6E7E8; --offwhite:#F1F2F2;
  --sans:"Unitea Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"RCL Morland", Georgia, serif;
  --maxw:1180px; --pad:clamp(20px, 5vw, 64px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--black);background:var(--white);
     font-size:clamp(16px,1.15vw,18px);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--yellow)}

/* ---- nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;
     padding:22px var(--pad);max-width:var(--maxw);margin:0 auto}
.nav-logo img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(16px,3vw,36px);
     font-weight:600;font-size:15px;letter-spacing:.01em}
.nav-links a:not(.nav-cta):hover{color:var(--slate)}
.nav-cta{background:var(--black);color:var(--white);padding:10px 22px;border-radius:999px;transition:background .2s}
.nav-cta:hover{background:var(--graphite)}

/* ---- hero ---- */
.hero{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vh,120px) var(--pad) clamp(56px,8vh,100px)}
.eyebrow{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;
     letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:28px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--yellow);flex:none}
.hero h1{font-weight:900;font-size:clamp(42px,6.4vw,88px);line-height:1.02;
     letter-spacing:-.015em;max-width:14ch}
.hero h1 .em{font-weight:600}
.hero-sub{margin-top:30px;max-width:56ch;font-size:clamp(17px,1.35vw,21px);color:var(--graphite)}
.hero-actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}

.btn{display:inline-block;padding:15px 32px;border-radius:999px;font-weight:700;
     font-size:16px;transition:all .2s;border:2px solid transparent}
.btn-solid{background:var(--black);color:var(--white)}
.btn-solid:hover{background:var(--yellow);color:var(--black)}
.btn-ghost{border-color:var(--black)}
.btn-ghost:hover{background:var(--black);color:var(--white)}
.btn-yellow{background:var(--yellow);color:var(--black)}
.btn-yellow:hover{background:var(--white)}
.btn-ghost-onblack{border-color:var(--white);color:var(--white)}
.btn-ghost-onblack:hover{background:var(--white);color:var(--black)}

/* ---- black bands ---- */
.band{background:var(--black);color:var(--white);padding:clamp(48px,7vh,84px) var(--pad)}
.band-grid{max-width:var(--maxw);margin:0 auto;display:grid;
     grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px)}
.stat{display:flex;flex-direction:column;gap:8px}
.stat-n{font-weight:900;font-size:clamp(40px,4.5vw,64px);line-height:1;color:var(--yellow)}
.stat-l{font-size:15px;color:var(--grey);line-height:1.45}

.band-tall{padding:clamp(72px,11vh,130px) var(--pad)}
.studio-inner{max-width:var(--maxw);margin:0 auto}
.onblack{color:var(--white)}
.kicker-onblack{color:var(--yellow)}
.studio-p{margin:26px 0 38px;max-width:58ch;font-size:clamp(17px,1.3vw,20px);color:var(--grey)}

/* ---- sections ---- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,10vh,120px) var(--pad)}
.section-alt{max-width:none;background:var(--offwhite)}
.section-alt > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.kicker{font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
     color:var(--slate);margin-bottom:18px}
h2{font-weight:900;font-size:clamp(30px,3.6vw,52px);line-height:1.08;
     letter-spacing:-.01em;max-width:22ch}
h2 .em{font-weight:600}

/* ---- service cards ---- */
.cards{margin-top:clamp(40px,6vh,64px);display:grid;
     grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,36px)}
.card{border:2px solid var(--black);border-radius:24px;padding:36px 30px;
     transition:transform .2s, box-shadow .2s;background:var(--white)}
.card:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--yellow)}
.card-core{width:56px;height:56px;border-radius:50%;background:var(--yellow);
     display:flex;align-items:center;justify-content:center;
     font-weight:800;font-size:17px;margin-bottom:24px}
.card h3{font-weight:800;font-size:22px;margin-bottom:12px;letter-spacing:-.01em}
.card p{color:var(--graphite);font-size:16px}

/* ---- work list ---- */
.worklist{list-style:none;margin-top:clamp(36px,5vh,56px)}
.worklist li{border-top:2px solid var(--black);padding:30px 0;
     display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:12px 48px}
.worklist li:last-child{border-bottom:2px solid var(--black)}
.worklist h3{font-weight:800;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.01em}
.worklist p{color:var(--graphite);max-width:62ch}
.nda-note{margin-top:28px;font-size:15px;color:var(--slate);font-weight:500}

/* ---- footer ---- */
.footer{background:var(--black);color:var(--white);
     padding:clamp(56px,8vh,90px) var(--pad) 42px;border-top:6px solid var(--yellow)}
.footer-tag{max-width:var(--maxw);margin:0 auto;font-weight:900;
     font-size:clamp(34px,5vw,64px);letter-spacing:-.015em;line-height:1}
.footer-tag .em{font-weight:600}
.footer-dot{color:var(--yellow)}
.footer-meta{max-width:var(--maxw);margin:44px auto 0;display:flex;flex-wrap:wrap;
     gap:14px 36px;font-size:15px;color:var(--grey)}
.footer-meta a:hover{color:var(--yellow)}

/* ---- responsive ---- */
@media (max-width:900px){
  .cards{grid-template-columns:1fr}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .worklist li{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav-links a:not(.nav-cta){display:none}
  .band-grid{grid-template-columns:1fr 1fr;gap:28px}
}

/* ---- brand work gallery (never-stretch frames) ---- */
.section-full{padding:clamp(72px,10vh,120px) var(--pad)}
.section-head{max-width:var(--maxw);margin:0 auto}
.gallery{max-width:var(--maxw);margin:clamp(40px,6vh,64px) auto 0;
     display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,24px)}
.tile{flex:none;margin:0}
.frame{height:clamp(160px,24vh,260px);aspect-ratio:var(--r);width:auto;
     border-radius:18px;overflow:hidden;background:var(--grey)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.tile figcaption{margin-top:10px;font-weight:600;font-size:14px;color:var(--graphite)}
@media (max-width:700px){
  .gallery{gap:14px}
  .frame{height:clamp(120px,18vh,180px)}
}