/* =====================================================================
   KRITI V5 — dark fashion-school visual system
   Reference direction: image-led programme discovery, confident typography,
   strong contrast, restrained motion, and direct admission actions.
   ===================================================================== */
:root{
  --heading:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ink:#24151c;
  --ink-soft:#3b252e;
  --wine:#35131e;
  --wine-2:#4b1829;
  --berry:#6c213c;
  --berry-light:#8a2f4e;
  --rose:#df4776;
  --rose-bright:#f16b96;
  --rose-deep:#a82c4d;
  --pink-mist:#f5d9e2;
  --gold:#d8ac62;
  --gold-light:#f1d6a0;
  --cream:#fff8f4;
  --paper:#fffdfb;
  --muted:#735f68;
  --line:#e7ccd6;
  --footer:#5c293c;
  --footer-soft:#6c3248;
}

/* Typography: Helvetica for main and supporting headings, Manrope for reading. */
h1,h2,h3,h4,h5,h6,.display,.quote,.quick-card h3,.process-list strong,
.course-showcase h2,.course-showcase h3,.contact-card strong,.footer-brand strong,
.nav-dropdown__menu strong,.mobile-courses__head>a{
  font-family:var(--heading)!important;
  font-style:normal;
}
h1,h2,h3,h4,h5,h6,.display{font-weight:800;letter-spacing:-.035em}
.display{line-height:1.02}
.display em{font-style:normal;color:var(--rose-bright)}
.display--hero{font-size:clamp(43px,5.4vw,72px)}
.display--xl{font-size:clamp(38px,4.4vw,58px)}
.display--lg{font-size:clamp(32px,3.5vw,48px)}
.eyebrow{font-size:13px;letter-spacing:.18em;margin-bottom:20px}
.lead{font-size:20px;line-height:1.72}
.prose{font-size:18.5px;line-height:1.85}
.prose h2{font-size:clamp(34px,3.2vw,44px)}
.prose h3{font-size:clamp(25px,2.3vw,32px)}
.value-card h3,.why-card h3{font-size:clamp(25px,2.2vw,31px)}
.module strong{font-size:21px}

body{background:#f8eef1}
.section{padding:98px 0}

/* Header / brand — enough real height for the square KRITI logo to stay legible. */
.site-header{
  height:112px;
  padding:0 30px;
  grid-template-columns:126px 1fr 150px;
  background:rgba(255,250,247,.96);
  border-bottom:1px solid rgba(99,45,64,.11);
  overflow:visible;
}
.site-header.is-scrolled{height:92px;background:rgba(255,250,247,.985)}
.logo{height:100%;display:flex;align-items:center;justify-content:flex-start;overflow:visible}
.logo img{
  width:104px;
  height:104px;
  object-fit:contain;
  object-position:center;
  transform:none;
  filter:drop-shadow(0 5px 13px rgba(106,35,61,.12));
}
.site-header.is-scrolled .logo img{transform:scale(.86)}
.main-nav{gap:28px;font-size:13px}
.mobile-nav{inset:112px 0 0}

/* The course menu starts below the complete header — never over the Courses label. */
.nav-dropdown{height:100%;align-items:center}
.nav-dropdown__menu{
  top:100%;
  margin-top:0;
  transform:translate(-50%,10px);
  border-top:3px solid var(--rose);
  border-radius:0 0 18px 18px;
  box-shadow:0 28px 60px rgba(47,18,29,.19);
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu{transform:translate(-50%,0)}
.nav-dropdown::after{top:82%;height:30px}
.nav-dropdown__menu>a:hover{background:linear-gradient(105deg,#fbe6ed,#fff3df)}

/* Strong home hero: dark fashion editorial panel + bright photography. */
.home-hero{min-height:calc(100vh - 112px);background:var(--wine)}
.home-hero__copy{
  color:#fff;
  background:
    radial-gradient(circle at 8% 8%,rgba(241,107,150,.24),transparent 25%),
    radial-gradient(circle at 84% 86%,rgba(216,172,98,.13),transparent 26%),
    linear-gradient(135deg,#2b0e18 0%,#441526 58%,#5e1b35 100%);
}
.home-hero__copy .display{color:#fff}
.home-hero__copy .lead{color:#eadde2}
.home-hero__copy .eyebrow{color:#f6b4c8}
.home-hero__copy .display::after{height:5px;width:145px;background:linear-gradient(90deg,var(--rose-bright),var(--gold-light))}
.home-hero__copy .pill--outline{color:#fff;border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.08)}
.home-hero__copy .pill--outline:hover{background:#fff;color:var(--wine)}
.home-hero__visual{min-height:700px;clip-path:none;background:#d5a0b1}
.home-hero__visual::after{background:linear-gradient(180deg,rgba(29,8,16,.02),rgba(31,7,15,.38))}
.hero-tag{border-radius:5px;border-left:4px solid var(--rose);max-width:315px}
.hero-tag strong{font-family:var(--heading)!important;font-weight:800;font-size:22px}

/* Bright but more saturated section-to-section rhythm. */
.home-intro{
  background:
    radial-gradient(circle at 8% 45%,rgba(216,172,98,.22),transparent 25%),
    radial-gradient(circle at 92% 45%,rgba(223,71,118,.14),transparent 24%),
    linear-gradient(125deg,#f4d5df,#fff0e5 58%,#efd2db);
}
.home-intro .display{color:var(--wine)}
.section--craft{
  background:
    radial-gradient(circle at 98% 6%,rgba(223,71,118,.16),transparent 25%),
    linear-gradient(135deg,#fff8f4,#f1dbe3);
}
.section--deep{
  color:#fff;
  background:
    radial-gradient(circle at 15% 20%,rgba(241,107,150,.22),transparent 28%),
    radial-gradient(circle at 88% 80%,rgba(216,172,98,.16),transparent 24%),
    linear-gradient(135deg,#32101b,#571b31 55%,#6d2340);
}
.section--deep .quick-card{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  color:#fff;
  backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(17,3,8,.13);
}
.section--deep .quick-card h3{color:#fff}
.section--deep .quick-card p{color:#e8d9df}
.section--deep .quick-card span,.section--deep .quick-card b{color:#f7b2c8}
.section--deep .quick-card:hover{background:rgba(255,255,255,.12);border-color:rgba(241,214,160,.55)}

/* Programme discovery — image-first, strong overlay and reveal-on-hover interaction. */
.course-preview{
  background:
    radial-gradient(circle at 6% 100%,rgba(223,71,118,.27),transparent 28%),
    radial-gradient(circle at 94% 0,rgba(216,172,98,.12),transparent 25%),
    linear-gradient(125deg,#250b14,#421321 58%,#2a0b15);
}
.course-preview__intro{max-width:690px;color:#d8c5cc;font-size:17px;line-height:1.7;margin:18px 0 0}
.course-showcase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;z-index:2}
.course-showcase{
  position:relative;
  display:block;
  min-height:500px;
  overflow:hidden;
  background:#32101b;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  isolation:isolate;
  box-shadow:0 22px 52px rgba(14,3,7,.18);
  transition:transform .55s cubic-bezier(.18,.75,.25,1),box-shadow .55s ease,border-color .35s ease;
}
.course-showcase::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:-30% 115% -30% -40%;
  background:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.19) 50%,transparent 64%);
  transform:skewX(-13deg);
  transition:inset .75s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.course-showcase:hover::before{inset:-30% -55% -30% 100%}
.course-showcase img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.18,.75,.25,1),filter .55s ease}
.course-showcase__shade{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(20,5,10,.04) 18%,rgba(30,7,15,.28) 52%,rgba(28,7,14,.94) 100%);transition:background .5s ease}
.course-showcase__number{position:absolute;z-index:4;top:18px;right:18px;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;background:rgba(36,9,18,.26);backdrop-filter:blur(8px);transition:background .35s,border-color .35s,transform .45s}
.course-showcase__content{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:27px 25px;color:#fff;transform:translateY(0);transition:transform .52s cubic-bezier(.18,.75,.25,1)}
.course-showcase__meta{display:inline-flex;color:#f7c6d5;font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;margin-bottom:9px}
.course-showcase h3,.course-showcase h2{color:#fff;margin:0;font-weight:800;line-height:1.06;letter-spacing:-.035em}
.course-showcase h3{font-size:clamp(23px,2vw,29px)}
.course-showcase h2{font-size:clamp(27px,2.6vw,36px)}
.course-showcase p{color:#eadbe1;font-size:13px;line-height:1.55;margin:13px 0 0}
.course-showcase__cta{display:flex;align-items:center;justify-content:space-between;color:#fff;margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.25);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.course-showcase__cta b{font-size:21px;font-weight:400;transition:transform .35s ease,color .35s ease}
.course-showcase:hover{transform:translateY(-9px);border-color:rgba(241,214,160,.65);box-shadow:0 34px 72px rgba(13,2,6,.34)}
.course-showcase:hover img{transform:scale(1.095);filter:saturate(1.12) contrast(1.04)}
.course-showcase:hover .course-showcase__shade{background:linear-gradient(180deg,rgba(96,24,51,.12),rgba(130,33,68,.40) 47%,rgba(39,8,18,.96) 100%)}
.course-showcase:hover .course-showcase__number{background:var(--rose);border-color:var(--rose);transform:rotate(8deg) scale(1.04)}
.course-showcase:hover .course-showcase__content{transform:translateY(-6px)}
.course-showcase:hover .course-showcase__cta b{transform:translate(3px,-3px);color:var(--gold-light)}

/* Catalogue keeps the same visual language but gives each programme more room. */
.courses-hero{background:linear-gradient(120deg,#32101b,#571b31);color:#fff}
.courses-hero .display{color:#fff}.courses-hero .lead{color:#eadce1}.courses-hero .breadcrumbs{color:#d7bec7}.courses-hero .breadcrumbs a{color:#ffb7cf}
.courses-page--visual{padding:76px 0 110px;background:linear-gradient(180deg,#f5e3e9,#fff8f4 36%,#f2dce4)}
.courses-visual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.course-showcase--catalogue{min-height:590px}
.course-showcase--catalogue .course-showcase__content{padding:34px}
.course-showcase--catalogue p{font-size:15px;max-width:500px}

/* Internal heroes: dark, more contemporary, with tighter upper whitespace. */
.page-hero,.course-detail-hero{
  color:#fff;
  background:
    radial-gradient(circle at 93% 8%,rgba(241,107,150,.19),transparent 26%),
    radial-gradient(circle at 4% 92%,rgba(216,172,98,.12),transparent 28%),
    linear-gradient(125deg,#2b0e18,#4c172b 62%,#641f3a);
}
.page-hero .display,.course-detail-hero .display{color:#fff}
.page-hero .lead,.course-detail-hero .lead{color:#e9d9df;font-size:19px}
.page-hero .breadcrumbs,.course-detail-hero .breadcrumbs{color:#cdb7c0}
.page-hero .breadcrumbs a,.course-detail-hero .breadcrumbs a{color:#f5aec5}
.page-hero::before,.page-hero::after,.course-detail-hero::after{opacity:.55}
.about-page-hero{padding:42px 0 54px!important}
.about-page-hero .breadcrumbs{margin-bottom:18px}
.about-page-hero .page-hero__visual{height:500px;border-radius:8px}
.contact-hero{padding:72px 0 62px}
.contact-section{background:linear-gradient(135deg,#f0d7df,#fff7f0 58%,#efd3dd)}
.course-detail-image{border-radius:8px}

/* Contact: both numbers are visible as first-class actions. */
.contact-card{border-radius:10px;border-color:#dfbdc9;box-shadow:0 10px 28px rgba(80,28,47,.06)}
.contact-card--accent{background:linear-gradient(135deg,#451526,#6a213d);color:#fff;border-color:transparent}
.contact-card--accent span,.contact-card--accent p{color:#f1dce3}
.contact-card--accent strong{color:#fff}
.contact-phone-list{display:grid;gap:9px;margin-top:15px}
.contact-phone{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:8px;background:#f9e7ed;color:var(--wine);font-weight:800;transition:transform .28s ease,background .28s ease,color .28s ease}
.contact-phone svg{width:20px;height:20px;fill:var(--rose)}
.contact-phone span{font-size:17px!important;letter-spacing:.01em!important;text-transform:none!important;color:inherit!important}
.contact-phone:hover{transform:translateX(5px);background:var(--rose);color:#fff}
.contact-phone:hover svg{fill:#fff}
.wa-inline{padding:10px 0}

/* Supporting cards: clearer subheadings and more contrast. */
.quick-card{border-radius:10px}
.quick-card h3{font-size:clamp(28px,2.4vw,34px);line-height:1.08}
.value-card,.why-card{border-radius:10px}
.process-visual,.director-photo,.gallery-card,.map-frame{border-radius:10px}
.process-list strong{font-size:26px}

/* Footer: lighter than previous near-black footer while staying premium. */
.footer{
  background:
    radial-gradient(circle at 85% 0,rgba(241,107,150,.14),transparent 26%),
    linear-gradient(135deg,var(--footer),var(--footer-soft));
  color:#fff;
}
.footer-brand p,.footer-grid>div:not(.footer-brand){color:#ead6de}
.footer-label{color:#ffd0df!important}
.footer-bottom{color:#d8b9c5;border-top-color:rgba(255,255,255,.20)}
.footer-brand img{width:158px;height:158px}
.footer-brand strong{font-size:22px}

/* Buttons feel sharper in the darker system. */
.pill{border-radius:6px;padding:14px 23px;background:linear-gradient(135deg,var(--rose),#b9325d);box-shadow:0 12px 30px rgba(168,44,77,.24)}
.pill--small{padding:10px 16px}
.text-link{color:var(--rose-deep)}

@media (hover:hover) and (pointer:fine){
  .course-showcase p,.course-showcase__cta{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .45s ease}
  .course-showcase:hover p,.course-showcase:hover .course-showcase__cta{opacity:1;transform:translateY(0)}
  .course-showcase__content{transform:translateY(64px)}
  .course-showcase:hover .course-showcase__content{transform:translateY(0)}
}

@media(max-width:1050px){
  .site-header{height:94px;grid-template-columns:98px 1fr 50px}
  .site-header.is-scrolled{height:84px}
  .logo img{width:88px;height:88px}
  .mobile-nav{inset:94px 0 0}
  .home-hero{min-height:auto}
  .course-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .course-showcase{min-height:510px}
}
@media(max-width:700px){
  .section{padding:72px 0}
  .site-header{height:84px;grid-template-columns:82px 1fr 48px;padding:0 12px}
  .site-header.is-scrolled{height:78px}
  .logo img{width:76px;height:76px}
  .mobile-nav{inset:84px 0 0}
  .display--hero{font-size:clamp(39px,10vw,52px)}
  .display--xl{font-size:clamp(34px,9vw,45px)}
  .display--lg{font-size:clamp(29px,7.7vw,38px)}
  .eyebrow{font-size:12px}
  .lead{font-size:18px}
  .home-hero__copy{padding-top:56px;padding-bottom:62px}
  .course-showcase-grid,.courses-visual-grid{grid-template-columns:1fr}
  .course-showcase,.course-showcase--catalogue{min-height:500px}
  .course-showcase__content,.course-showcase--catalogue .course-showcase__content{padding:24px}
  .about-page-hero{padding:28px 0 42px!important}
  .about-page-hero .page-hero__visual{height:420px}
  .contact-hero{padding:54px 0 48px}
  .footer-brand img{width:132px;height:132px}
}