/* ============================================================
   KHAWIA — "Grace in every space" · brand-identity case
   A strategic identity story: name → position → the bilingual
   K+خ logogram → personality → system → applications → worn.
   Light limestone ground; the logogram + close dip to petrol.
   Real type system: Lato (+ Caveat as the Hometown grace note).
   ============================================================ */

.khw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{
  --space:#F4EFE7;        /* luminous limestone — the ground */
  --space-2:#EFE7DA;
  --space-3:#E8DDCC;
  --deep:#123642;         /* petrol cinema dip */
  --deep-2:#0E2C36;
  --ink:#194350;          /* brand petrol — text, poise */
  --ink-soft:#3F5A63;     /* muted petrol — AA on light */
  --ink-faint:#9BAAAE;    /* hairlines / borders ONLY — fails AA as text */
  --ink-faint-tx:#566A6F; /* faint-LOOK text that still clears AA (4.8:1) */
  --bone:#F6F1E8;
  --bone-soft:#CBD6D4;
  --coral:#FF8882;        /* the signal — fills / mark / on-dark */
  --coral-type:#B23A30;   /* the signal as TYPE on light — now true AA (4.7:1) */
  --melon:#FFC2B4;
  --sage:#9DB3A8;
  --cream:#EFE0CD;

  --f-disp:"Lato",system-ui,sans-serif;
  --f-sans:"Lato",system-ui,-apple-system,sans-serif;
  --f-ar:"Cairo","Lato",sans-serif;
  --f-script:"Caveat",cursive;

  --gut:clamp(20px,5vw,90px);
  --maxw:1240px;
  --e:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.khw{margin:0;background:var(--space);color:var(--ink);font-family:var(--f-sans);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
::selection{background:var(--coral);color:#fff}
a{color:inherit}
section{position:relative;z-index:2}

/* ---------- atmosphere / chrome ---------- */
.khw-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/></svg>")}
.khw-cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;mix-blend-mode:multiply;transform:translate(-50%,-50%);will-change:transform;opacity:0;transition:opacity .3s}
body.has-cursor .khw-cursor{opacity:1}
.khw-cursor i{display:block;width:11px;height:11px;border-radius:50%;background:var(--coral);transform:translate(-50%,-50%);transition:width .3s var(--e),height .3s var(--e)}
.khw-cursor.is-hot i{width:46px;height:46px;background:rgba(255,136,130,.16);border:1px solid var(--coral)}
.khw-cursor::after{content:attr(data-label);position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + 2px));font-family:var(--f-sans);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .25s}
.khw-cursor.has-label::after{opacity:1}
@media (pointer:coarse){.khw-cursor{display:none}}
.khw-prog{position:fixed;left:0;top:0;width:100%;height:2px;z-index:80;background:rgba(25,67,80,.10)}
.khw-prog i{display:block;height:100%;width:0;background:var(--coral)}
.khw-nav{position:fixed;top:0;left:0;width:100%;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px var(--gut);transition:transform .5s var(--e),opacity .4s}
.khw-nav.is-hidden{transform:translateY(-115%);opacity:0}
.khw-nav__back{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.04em;opacity:.85;transition:opacity .3s}
.khw-nav__back:hover{opacity:1}
.khw-nav__back svg{width:17px;height:17px}
.khw-nav__id{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.khw-nav__mark{width:24px;height:24px;display:inline-block}
.khw-nav__mark svg{width:100%;height:100%;display:block}
.khw-nav__mark .kp{fill:var(--coral)}.khw-nav__mark .kn{fill:var(--ink)}
@media (max-width:680px){.khw-nav__id span{display:none}}

/* ---------- the sparkle ---------- */
.khw-spark{width:100%;height:100%;display:block;overflow:visible}
.khw-spark__petal{fill:var(--coral)}
.khw-spark__notch{fill:var(--ink)}

/* ---------- shared type ---------- */
.khw-k{font-family:var(--f-sans);font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--coral-type);margin:0 0 1.1em}
.khw-k--light{color:var(--coral)}
.khw-eyebrow{font-family:var(--f-sans);font-size:clamp(11px,2.4vw,13px);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.khw-acc{color:var(--coral-type)}
em{font-style:italic;color:var(--coral-type)}
.khw-u{box-shadow:inset 0 -.42em 0 rgba(255,194,180,.5)}

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--e-io),transform 1s var(--e-io)}
[data-reveal].in{opacity:1;transform:none}
[data-split] .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .8s var(--e-io),transform .8s var(--e-io)}
[data-split].in .w{opacity:1;transform:none}

/* ============================================================ 01 · HERO */
/* HERO — a cinematic figure bathed in the warm CORAL atmosphere (clear, not a develop-blur) */
.khw-hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;padding:0 var(--gut) clamp(74px,11vh,130px)}
.khw-hero__figure{position:absolute;inset:0;margin:0;z-index:0;background:var(--deep-2)}
.khw-hero__figure img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;animation:khwHeroKen 26s ease-in-out infinite alternate}
@keyframes khwHeroKen{from{transform:scale(1.05)}to{transform:scale(1.12)}}
.khw-hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(64% 52% at 74% 18%,rgba(255,136,130,.62),rgba(255,136,130,0) 60%),radial-gradient(58% 56% at 14% 96%,rgba(255,150,138,.5),rgba(255,150,138,0) 62%);
  animation:khwHeroGlow 18s ease-in-out infinite alternate}
@keyframes khwHeroGlow{to{opacity:.72;transform:scale(1.06)}}
.khw-hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(4deg,rgba(11,25,31,.82),rgba(11,25,31,.16) 40%,rgba(11,25,31,0) 60%)}
.khw-hero__lockup{position:relative;z-index:3;max-width:34ch}
.khw-hero__lockup .khw-eyebrow{color:rgba(246,241,232,.76);margin:0 0 1.05em}
.khw-hero__ar{font-family:var(--f-ar);direction:rtl;font-weight:700;font-size:clamp(1.5rem,3.2vw,2.3rem);color:var(--melon);margin:0 0 .1em;line-height:1}
.khw-hero__title{font-family:var(--f-disp);font-weight:300;line-height:1;letter-spacing:-.02em;font-size:clamp(2.8rem,6.4vw,5.6rem);margin:0 0 .42em;color:var(--bone)}
.khw-hero__title .khw-acc{color:var(--coral)}
.khw-hero__sub{font-size:clamp(1rem,2vw,1.2rem);font-weight:300;line-height:1.55;color:rgba(246,241,232,.82);max-width:32ch;margin:0}
@media (prefers-reduced-motion:reduce){.khw-hero__figure img,.khw-hero__glow{animation:none}}
.khw-cue{position:absolute;right:var(--gut);bottom:clamp(20px,3.2vh,32px);z-index:3;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,241,232,.72);display:flex;align-items:center;gap:8px;margin:0}
.khw-cue i{font-style:normal;animation:khwbob 1.8s var(--e) infinite}
@keyframes khwbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* THE MARK — reinvented as a cinematic beat (image-backed, minimal text) — NOT a K+خ=formula rack */
.khw-mark{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:clamp(96px,15vh,170px) var(--gut);background:var(--deep-2)}
.khw-mark__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;opacity:.42;filter:saturate(.92)}
.khw-mark__scrim{position:absolute;inset:0;background:radial-gradient(78% 66% at 50% 40%,rgba(13,36,44,.6),rgba(12,30,38,.95) 90%),linear-gradient(0deg,rgba(12,30,38,.72),rgba(12,30,38,0) 42%)}
.khw-mark__stage{position:relative;z-index:2;max-width:42ch}
.khw-mark__stage .khw-k--light{color:var(--coral);margin:0 0 clamp(20px,4vh,42px)}
.khw-mark__sign{display:block;width:clamp(118px,19vw,208px);margin:0 auto clamp(24px,4.5vh,46px)}
.khw-mark__sign img{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 60px rgba(255,136,130,.32));animation:khwMarkFloat 8s ease-in-out infinite alternate}
@keyframes khwMarkFloat{to{transform:translateY(-10px) scale(1.025)}}
.khw-mark__cap{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.1rem,2.3vw,1.65rem);line-height:1.45;color:var(--bone);margin:0}
.khw-mark__cap b{color:var(--melon);font-weight:400}
.khw-mark__cap em{font-style:italic;color:var(--melon)}
.khw-mark__cap span{color:var(--melon);font-family:var(--f-ar);font-weight:700}
@media (prefers-reduced-motion:reduce){.khw-mark__sign img{animation:none}}

/* THE NAME — خاوية as the graphic hero; strategy shown in 2 lines w/ space (was origin + position) */
.khw-name{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(100px,17vh,210px) var(--gut);min-height:88svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden}
.khw-name__stage{position:relative;z-index:2;max-width:30ch}
.khw-name .khw-k{color:var(--coral-type);margin:0 0 clamp(22px,4vh,44px)}
.khw-name__ar{font-family:var(--f-ar);font-weight:700;font-size:clamp(4.6rem,17vw,12rem);line-height:.78;letter-spacing:-.01em;color:var(--ink);margin:0;direction:rtl;white-space:nowrap}
.khw-name__def{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.1rem,2.4vw,1.7rem);color:var(--ink-soft);margin:clamp(22px,4vh,42px) auto 0;line-height:1.35;max-width:30ch}
.khw-name__def i{font-style:italic;color:var(--coral-type)}
.khw-name__idea{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.35rem,3vw,2.3rem);color:var(--ink);margin:clamp(28px,5vh,58px) auto 0;max-width:28ch;line-height:1.24}
.khw-name__idea .khw-acc{color:var(--coral-type)}

/* COLOUR — restraint as PROPORTION (unequal stripes by usage weight), not a swatch rack */
.khw-colour{max-width:1400px;margin:0 auto;padding:clamp(70px,12vh,150px) var(--gut)}
.khw-prop{display:flex;height:clamp(300px,54vh,560px);border-radius:6px;overflow:hidden;box-shadow:0 44px 100px -58px rgba(25,67,80,.55);margin:clamp(30px,5vh,54px) 0 0}
.khw-prop__t{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,2vh,22px) clamp(12px,1.4vw,20px);min-width:0;overflow:hidden;transition:flex .55s var(--e)}
.khw-prop__t i{font-family:var(--f-sans);font-weight:700;font-style:normal;font-size:12px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.khw-prop__t em{font-family:var(--f-sans);font-style:normal;font-size:10px;letter-spacing:.11em;text-transform:uppercase;opacity:.72;margin-top:4px;white-space:nowrap}
.khw-prop__t--cream{background:#EFE0CD;color:#675942}
.khw-prop__t--petrol{background:#194350;color:#F6F1E8}
.khw-prop__t--sage{background:#9DB3A8;color:#26352f}
.khw-prop__t--melon{background:#FFC2B4;color:#7a4136}
.khw-prop__t--coral{background:#FF8882;color:#5a2723}
.khw-prop__t:hover,.khw-prop__t:focus-visible{flex:26!important;outline:none}
.khw-colour__note{margin:clamp(20px,3vh,32px) 0 0;font-weight:300;color:var(--ink-soft);font-size:clamp(1rem,2vw,1.12rem);max-width:56ch}
@media (max-width:640px){.khw-prop{height:auto;flex-direction:column}.khw-prop__t{padding:14px 16px}.khw-prop__t--cream{flex:0 0 30vh!important}.khw-prop__t--petrol{flex:0 0 16vh!important}.khw-prop__t--sage,.khw-prop__t--melon,.khw-prop__t--coral{flex:0 0 8vh!important}.khw-prop__t:hover,.khw-prop__t:focus-visible{flex:0 0 14vh!important}.khw-prop__t{flex-direction:row;align-items:center;gap:10px}.khw-prop__t em{margin-top:0}}

/* TYPE — the tagline BEHAVES (weight = the demo), not an Aa specimen */
.khw-type-sec{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,15vh,190px) var(--gut);min-height:78svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.khw-type__stage{max-width:24ch}
.khw-type-sec .khw-k{color:var(--coral-type);margin:0 0 clamp(24px,5vh,52px)}
.khw-type__demo{font-family:var(--f-disp);font-weight:300;font-size:clamp(2.8rem,10vw,7.5rem);line-height:.98;letter-spacing:-.02em;color:var(--ink);margin:0}
.khw-type__demo b{font-weight:900}
.khw-type__demo span{font-weight:300;color:var(--coral-type)}
.khw-type__note{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.05rem,2.2vw,1.45rem);color:var(--ink-soft);margin:clamp(30px,5.5vh,64px) auto 0;max-width:40ch;line-height:1.42}
.khw-type__note b{font-weight:700;color:var(--ink)}
.khw-type__script{font-family:var(--f-script);font-size:1.55em;line-height:0;color:var(--coral-type);font-style:normal;vertical-align:-.08em}

/* ============================================================ 02 · ORIGIN */
.khw-origin{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(90px,16vh,200px) var(--gut);overflow:hidden}
.khw-origin__word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}
.khw-origin__ar{font-family:var(--f-ar);font-weight:700;font-size:clamp(4rem,14vw,12rem);line-height:.8;color:var(--coral);opacity:.17;direction:rtl;white-space:nowrap;max-width:96vw}
.khw-origin__copy{position:relative;z-index:2;max-width:30ch}
.khw-origin__lead{font-family:var(--f-disp);font-weight:300;line-height:1.08;font-size:clamp(2rem,6vw,4.2rem);margin:0 0 .7em;color:var(--ink)}
.khw-origin__body{font-size:clamp(1.02rem,2vw,1.2rem);font-weight:300;line-height:1.6;color:var(--ink-soft);margin:0 0 1.1em;max-width:34ch}
.khw-origin__body b{font-weight:700;color:var(--ink)}

/* ============================================================ 03 · POSITION */
.khw-position{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,8vh,90px) var(--gut) clamp(80px,14vh,160px)}
.khw-position__lead{font-family:var(--f-disp);font-weight:300;line-height:1.1;letter-spacing:-.01em;font-size:clamp(1.9rem,5.6vw,3.9rem);margin:0 0 1.3em;max-width:20ch;color:var(--ink)}
.khw-position__rows{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,60px);border-top:1px solid rgba(25,67,80,.16);padding-top:46px}
.khw-prow{display:flex;flex-direction:column;gap:12px}
.khw-prow__n{font-family:var(--f-sans);font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--coral-type)}
.khw-prow h3{font-family:var(--f-disp);font-weight:700;font-size:1.05rem;margin:0;color:var(--ink)}
.khw-prow p{margin:0;font-size:clamp(.96rem,1.7vw,1.04rem);font-weight:300;line-height:1.6;color:var(--ink-soft)}
@media (max-width:760px){.khw-position__rows{grid-template-columns:1fr;gap:30px}}

/* ============================================================ 04 · LOGOGRAM (sticky, petrol dip) */
.khw-logo{position:relative;height:460vh;background:linear-gradient(180deg,var(--space),var(--deep) 14%,var(--deep) 86%,var(--space-2))}
.khw-logo__stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut);overflow:hidden}
.khw-logo__tag{position:absolute;top:clamp(80px,12vh,130px);left:50%;transform:translateX(-50%)}
.khw-logo .khw-spark__notch{fill:var(--bone)}
/* the formula row */
.khw-formula{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,44px);margin-bottom:clamp(34px,6vh,68px);min-height:clamp(110px,18vh,200px)}
.khw-glyph{font-family:var(--f-disp);font-weight:900;color:var(--bone);line-height:1;opacity:0;transform:translateY(14px) scale(.92);transition:opacity .6s var(--e),transform .7s var(--e)}
.khw-glyph--k,.khw-glyph--kha{font-size:clamp(4.5rem,15vw,11rem)}
.khw-glyph--kha{font-family:var(--f-ar);font-weight:700}
.khw-glyph--mark{width:clamp(5rem,16vw,12rem);height:clamp(5rem,16vw,12rem);display:inline-flex}
.khw-glyph--mark .khw-spark{width:100%;height:100%}
.khw-op{font-family:var(--f-disp);font-weight:300;font-size:clamp(2rem,6vw,4rem);color:var(--bone-soft);opacity:0;transform:scale(.6);transition:opacity .5s var(--e),transform .5s var(--e)}
/* reveal by beat */
.khw-logo[data-on="0"] [data-g="k"],.khw-logo[data-on="1"] [data-g="k"],.khw-logo[data-on="2"] [data-g="k"],.khw-logo[data-on="3"] [data-g="k"]{opacity:1;transform:none}
.khw-logo[data-on="1"] [data-g="op1"],.khw-logo[data-on="2"] [data-g="op1"],.khw-logo[data-on="3"] [data-g="op1"]{opacity:1;transform:none}
.khw-logo[data-on="1"] [data-g="kha"],.khw-logo[data-on="2"] [data-g="kha"],.khw-logo[data-on="3"] [data-g="kha"]{opacity:1;transform:none}
.khw-logo[data-on="2"] [data-g="op2"],.khw-logo[data-on="3"] [data-g="op2"]{opacity:1;transform:none}
.khw-logo[data-on="3"] [data-g="mark"]{opacity:1;transform:none;filter:drop-shadow(0 0 28px rgba(255,136,130,.5))}
/* beats text */
.khw-logo__beats{position:relative;width:100%;max-width:560px;height:clamp(120px,18vh,170px)}
.khw-beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;transform:translateY(16px);transition:opacity .55s var(--e),transform .55s var(--e);user-select:none}
.khw-beat.is-on{opacity:1;transform:none}
.khw-beat b{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.4rem,4vw,2.3rem);line-height:1.1;color:var(--bone)}
.khw-beat span{font-size:clamp(.92rem,2vw,1.04rem);font-weight:300;color:var(--bone-soft);max-width:38ch}
.khw-beat i{font-style:normal;color:var(--coral)}
.khw-beat i[lang="ar"]{font-family:var(--f-ar);font-weight:700}
.khw-logo__rail{display:flex;gap:8px;margin-top:clamp(22px,4vh,46px)}
.khw-logo__rail i{width:30px;height:2px;background:rgba(246,241,232,.2);transition:background .4s}
.khw-logo__rail i.is-on{background:var(--coral)}

/* ============================================================ 05 · PERSONALITY */
.khw-pers{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,14vh,160px) var(--gut);text-align:center}
.khw-pers__head{margin-bottom:clamp(40px,7vh,70px)}
.khw-pers__lead{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.8rem,5vw,3.4rem);margin:.2em 0 0;color:var(--ink)}
.khw-pers__bloom{position:relative;width:min(86vw,520px);height:min(86vw,520px);margin:0 auto}
.khw-pers__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;height:34%;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-disp);font-weight:700;font-size:clamp(1.1rem,3.4vw,1.7rem);z-index:2;box-shadow:0 20px 50px -24px rgba(255,136,130,.7)}
.khw-pers__val{position:absolute;left:50%;top:50%;width:30%;height:30%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-sans);font-weight:700;font-size:clamp(.8rem,2.3vw,1rem);letter-spacing:.01em}
.khw-pers__val--1{transform:translate(-50%,-50%) rotate(-90deg) translateY(-118%) rotate(90deg);background:var(--ink);color:var(--bone)}
.khw-pers__val--2{transform:translate(-50%,-50%) rotate(-30deg) translateY(-118%) rotate(30deg);background:var(--cream);color:var(--ink)}
.khw-pers__val--3{transform:translate(-50%,-50%) rotate(30deg) translateY(-118%) rotate(-30deg);background:var(--ink);color:var(--bone)}
.khw-pers__val--4{transform:translate(-50%,-50%) rotate(90deg) translateY(-118%) rotate(-90deg);background:var(--cream);color:var(--ink)}
.khw-pers__val--5{transform:translate(-50%,-50%) rotate(150deg) translateY(-118%) rotate(-150deg);background:var(--ink);color:var(--bone)}
.khw-pers__val--6{transform:translate(-50%,-50%) rotate(210deg) translateY(-118%) rotate(-210deg);background:var(--cream);color:var(--ink)}
.khw-pers__note{margin:clamp(40px,7vh,64px) auto 0;max-width:46ch;font-weight:300;color:var(--ink-soft);font-size:clamp(1rem,2vw,1.1rem)}
@media (max-width:560px){.khw-pers__bloom{width:90vw;height:90vw}.khw-pers__val{font-size:.8rem}}

/* ============================================================ 06 · SYSTEM */
.khw-system{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(40px,7vh,80px)}
.khw-system__head{max-width:40ch;margin-bottom:clamp(36px,6vh,60px)}
.khw-system__lead{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.9rem,5.4vw,3.6rem);margin:0;color:var(--ink)}
.khw-sysblock{margin-bottom:clamp(20px,3vw,34px)}
.khw-sysblock__tag{font-family:var(--f-sans);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.khw-sysblock__tag i{font-style:normal;color:var(--coral-type)}
.khw-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.khw-sw{aspect-ratio:4/5;border-radius:3px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.khw-sw b{font-family:var(--f-disp);font-weight:700;font-size:clamp(1rem,2.4vw,1.4rem);line-height:1}
.khw-sw span{font-size:10.5px;opacity:.72;margin-top:4px}
.khw-sw i{position:absolute;top:14px;right:14px;font-style:normal;font-size:9px;letter-spacing:.06em;opacity:.42}
.khw-sw--ink{background:var(--ink);color:var(--bone)}
.khw-sw--coral{background:var(--coral);color:#5a2723}
.khw-sw--melon{background:var(--melon);color:#7a4136}
.khw-sw--sage{background:var(--sage);color:#26352f}
.khw-sw--cream{background:var(--cream);color:#7a6a52}
@media (max-width:640px){.khw-palette{grid-template-columns:repeat(3,1fr)}}
.khw-sysrow{display:grid;grid-template-columns:1fr 1.1fr;gap:14px}
.khw-type,.khw-pat{border:1px solid rgba(25,67,80,.12);border-radius:3px;padding:24px;background:var(--space-2)}
.khw-type__spec{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin:18px 0 16px;min-height:90px}
.khw-type__lato{font-family:var(--f-disp);font-weight:900;font-size:clamp(2.6rem,7vw,4rem);color:var(--ink);line-height:.9}
.khw-type__caveat{font-family:var(--f-script);font-weight:600;font-size:clamp(2.2rem,6vw,3.2rem);color:var(--coral-type)}
.khw-type__cap{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--ink-soft)}
.khw-type__cap b{font-weight:700;color:var(--ink)}
.khw-pat__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.khw-pat__tile{aspect-ratio:1/1;border-radius:2px;overflow:hidden}
.khw-pat__tile--const{background:var(--cream);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g stroke='%23C9463E' stroke-width='.7' fill='none' opacity='.55'><path d='M20 34 L70 18 L120 40 L150 96 L96 128 L40 120 L14 70 Z'/><path d='M70 18 L96 70 L40 120'/><path d='M120 40 L96 70 L150 96'/></g><g fill='%23FF8882'><path d='M20 34l4 4-4 4-4-4z'/><path d='M70 18l4 4-4 4-4-4z'/><path d='M120 40l4 4-4 4-4-4z'/><path d='M150 96l4 4-4 4-4-4z'/><path d='M96 70l5 5-5 5-5-5z'/><path d='M40 120l4 4-4 4-4-4z'/><path d='M14 70l4 4-4 4-4-4z'/></g></svg>")}
.khw-pat__tile--wave{background:var(--deep);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'><path d='M-4 20 q14 -15 28 0 t28 0 t28 0' stroke='%23FF8882' stroke-width='6' fill='none'/></svg>");background-size:auto 26px}
@media (max-width:760px){.khw-sysrow{grid-template-columns:1fr}}

/* ============================================================ 07 · APPLICATIONS */
.khw-apps{max-width:1400px;margin:0 auto;padding:clamp(70px,12vh,150px) var(--gut)}
.khw-apps__head{max-width:42ch;margin-bottom:clamp(40px,7vh,70px)}
.khw-apps__lead{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.9rem,5.4vw,3.6rem);margin:0 0 .5em;color:var(--ink)}
.khw-apps__note{margin:0;font-weight:300;color:var(--ink-soft);font-size:clamp(1rem,2vw,1.12rem);max-width:48ch}
.khw-apps__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,clamp(180px,26vh,262px));gap:14px}
.khw-app{margin:0;position:relative;overflow:hidden;border-radius:4px;background:var(--space-3);cursor:pointer;transition:transform .5s var(--e),box-shadow .5s var(--e)}
.khw-app img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.khw-app:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(25,67,80,.5)}
.khw-app:hover img{transform:scale(1.05)}
.khw-app--feature{grid-column:1;grid-row:1/3}
.khw-app--wide{grid-column:2/4;grid-row:2}
.khw-app figcaption{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--f-sans);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.khw-app::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;background:linear-gradient(transparent,rgba(13,30,36,.45))}
/* the WAVE — the brand's 2nd pattern, introduced where the packaging lives */
.khw-wave{margin-top:14px;display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(18px,3vw,36px);align-items:stretch}
.khw-wave__band{border-radius:4px;background:#194350 url(assets/sys/wave.svg) 0 0/96px 67px;min-height:clamp(86px,11vh,128px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 22px 50px -36px rgba(25,67,80,.5)}
.khw-wave__cap{margin:0;align-self:center;font-weight:300;color:var(--ink-soft);font-size:clamp(.95rem,1.9vw,1.08rem);line-height:1.55;max-width:40ch}
.khw-wave__cap b{font-weight:600;color:var(--coral-type)}
@media (max-width:760px){
  .khw-apps__grid{grid-template-columns:1fr 1fr;grid-auto-rows:168px}
  .khw-app--feature{grid-column:1/3;grid-row:span 2}
  .khw-app--wide{grid-column:1/3;grid-row:span 1}
  .khw-wave{grid-template-columns:1fr;gap:14px}
}

/* ============================================================ 08 · CAMPAIGN (supporting) */
.khw-camp{max-width:1400px;margin:0 auto;padding:clamp(40px,7vh,90px) var(--gut) clamp(70px,12vh,140px)}
.khw-camp__head{max-width:42ch;margin-bottom:clamp(36px,6vh,60px)}
.khw-camp__lead{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.9rem,5.4vw,3.6rem);margin:0 0 .5em;color:var(--ink)}
.khw-camp__note{margin:0;font-weight:300;color:var(--ink-soft);font-size:clamp(1rem,2vw,1.12rem);max-width:46ch}
.khw-camp__row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.khw-camp__row figure{margin:0;overflow:hidden;border-radius:3px;background:var(--space-3);cursor:pointer}
.khw-camp__row img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .9s var(--e)}
.khw-camp__row figure:hover img{transform:scale(1.05)}
.khw-camp__more{margin:28px 0 0}
.khw-camp__more a{text-decoration:none;font-family:var(--f-sans);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-type);border-bottom:1px solid rgba(201,70,62,.4);padding-bottom:3px}
.khw-camp__more i{font-style:normal}
@media (max-width:640px){.khw-camp__row{grid-template-columns:1fr 1fr}}

/* ============================================================ 09 · CLOSE */
.khw-close{position:relative;background:linear-gradient(180deg,var(--space-2),var(--deep) 22%,var(--deep-2));color:var(--bone);text-align:center;padding:clamp(90px,16vh,190px) var(--gut) 60px;overflow:hidden}
.khw-close__spark{display:block;width:min(24vw,140px);height:min(24vw,140px);margin:0 auto clamp(26px,5vh,44px)}
.khw-close__spark .khw-spark__notch{fill:var(--bone)}
.khw-close__line{font-family:var(--f-disp);font-weight:300;line-height:1.05;font-size:clamp(2.2rem,7vw,5rem);margin:0 0 .5em;color:var(--bone)}
.khw-close__line .khw-acc{color:var(--coral)}
.khw-close__tag{font-family:var(--f-sans);letter-spacing:.32em;text-transform:uppercase;font-weight:700;font-size:clamp(10px,2.2vw,12px);color:var(--bone-soft);margin:0 0 2.6em}
.khw-client{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--coral);font-size:clamp(1.1rem,3vw,1.45rem);font-weight:300;letter-spacing:.02em;border-bottom:1px solid rgba(255,136,130,.4);padding-bottom:3px;transition:border-color .3s}
.khw-client:hover{border-color:var(--coral)}
.khw-client i{font-style:normal;font-size:.8em}
.khw-credits{display:grid;grid-template-columns:repeat(4,auto);gap:30px 50px;justify-content:center;margin:clamp(48px,8vh,86px) auto 0;max-width:980px;text-align:left}
.khw-credits dt{font-family:var(--f-sans);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin-bottom:7px}
.khw-credits dd{margin:0;font-size:.92rem;font-weight:300;color:var(--bone);line-height:1.45;max-width:26ch}
@media (max-width:760px){.khw-credits{grid-template-columns:1fr 1fr;gap:26px 30px}}
@media (max-width:520px){.khw-credits{grid-template-columns:1fr;gap:22px;text-align:center;justify-items:center}.khw-credits dd{max-width:32ch}}
.khw-close__nav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:var(--maxw);margin:clamp(56px,9vh,96px) auto 0;padding-top:34px;border-top:1px solid rgba(246,241,232,.14)}
.khw-next{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--bone)}
.khw-next span{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-soft)}
.khw-next b{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.5rem,4vw,2.3rem);color:var(--bone)}
.khw-next:hover b{color:var(--coral)}
.khw-allwork{text-decoration:none;color:var(--bone-soft);font-size:13px;letter-spacing:.04em;transition:color .3s}
.khw-allwork:hover{color:var(--coral)}
.khw-legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:var(--maxw);margin:46px auto 0;font-size:11px;letter-spacing:.04em;color:var(--bone-soft);opacity:.7}

/* ============================================================ LIGHTBOX */
.khw-lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(13,30,36,.93);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s var(--e)}
.khw-lb.is-open{opacity:1;pointer-events:auto}
.khw-lb__stage{margin:0;max-width:min(92vw,640px);max-height:86vh;display:flex;align-items:center;justify-content:center}
.khw-lb__stage img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:3px;box-shadow:0 40px 120px -40px rgba(0,0,0,.7);opacity:0;transform:scale(.97);transition:opacity .4s var(--e),transform .4s var(--e)}
.khw-lb.is-open .khw-lb__stage img{opacity:1;transform:none}
.khw-lb__close{position:absolute;top:22px;right:26px;background:none;border:0;color:var(--bone);font-size:24px;cursor:pointer;width:44px;height:44px;border-radius:50%;transition:background .3s}
.khw-lb__close:hover{background:rgba(246,241,232,.12)}
.khw-lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(246,241,232,.08);border:0;color:var(--bone);width:50px;height:50px;border-radius:50%;font-size:26px;cursor:pointer;transition:background .3s}
.khw-lb__nav:hover{background:var(--coral);color:#fff}
.khw-lb__nav--prev{left:max(16px,3vw)}.khw-lb__nav--next{right:max(16px,3vw)}
.khw-lb__count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.16em;color:var(--bone-soft)}
@media (max-width:640px){.khw-lb__nav{width:42px;height:42px;font-size:22px}}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal],[data-split] .w{opacity:1!important;transform:none!important}
  .khw-glyph,.khw-op{opacity:1!important;transform:none!important}
  .khw-beat{position:relative;opacity:1;transform:none;margin-bottom:18px}
  .khw-logo__beats{height:auto}
  .khw-logo{height:auto}.khw-logo__stage{position:static;height:auto;padding:90px var(--gut)}
  .khw-logo__tag{position:static;transform:none;margin-bottom:20px}
}

/* ============================================================ RESPONSIVE */
@media (max-width:860px){
  .khw-hero{padding-bottom:clamp(66px,11vh,104px)}
  .khw-hero__lockup{max-width:none}
  .khw-hero__figure img{object-position:50% 18%}
  .khw-hero__scrim{background:linear-gradient(4deg,rgba(11,25,31,.9),rgba(11,25,31,.3) 46%,rgba(11,25,31,0) 66%)}
  .khw-cue{left:var(--gut);right:auto}
}
@media (max-width:560px){
  :root{--gut:20px}
  .khw-hero__title{font-size:clamp(2.8rem,15vw,4.4rem)}
  .khw-formula{gap:10px}
}

/* ============================================================
   ENVIRONMENT — the serene space, alive (EIMA-grade)
   light pools + grace drifting + the real constellation, faint
   ============================================================ */
.khw-env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.khw-grain{opacity:.34}
/* warm light pools, slowly breathing */
.khw-env__pool{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
/* the environment, DERIVED FROM CORAL — a warm luminous coral atmosphere (the serene space made of the brand's one voice) */
.khw-env__pool--1{width:62vw;height:62vw;left:-12vw;top:-14vw;background:radial-gradient(circle,rgba(255,136,130,.5),rgba(255,136,130,0) 64%);animation:khwPool1 40s ease-in-out infinite alternate}
.khw-env__pool--2{width:54vw;height:54vw;right:-16vw;top:22vh;background:radial-gradient(circle,rgba(255,176,164,.52),rgba(255,176,164,0) 64%);animation:khwPool2 54s ease-in-out infinite alternate}
.khw-env__pool--3{width:52vw;height:52vw;left:14vw;bottom:-16vw;background:radial-gradient(circle,rgba(255,150,138,.44),rgba(255,150,138,0) 66%);animation:khwPool3 64s ease-in-out infinite alternate}
@keyframes khwPool1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6vw,5vh) scale(1.14)}}
@keyframes khwPool2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-6vw,-4vh) scale(1.16)}}
@keyframes khwPool3{0%{transform:translate(0,0) scale(1.06)}100%{transform:translate(5vw,-6vh) scale(1)}}
/* grace, suspended — soft blurred sparkles drifting */
.khw-env__spark{position:absolute;display:block;will-change:transform}
.khw-env__spark .khw-spark__petal{fill:var(--coral)}.khw-env__spark .khw-spark__notch{fill:var(--sage)}
.khw-env__spark--1{width:30vw;height:30vw;left:56vw;top:6vh;filter:blur(8px);opacity:.06;animation:khwGrace1 48s ease-in-out infinite alternate}
.khw-env__spark--2{width:20vw;height:20vw;left:4vw;top:50vh;filter:blur(5px);opacity:.05;animation:khwGrace2 60s ease-in-out infinite alternate}
.khw-env__spark--3{width:13vw;height:13vw;left:72vw;top:74vh;filter:blur(3px);opacity:.08;animation:khwGrace3 42s ease-in-out infinite alternate}
@keyframes khwGrace1{0%{transform:translate(0,0) rotate(-6deg)}100%{transform:translate(-4vw,6vh) rotate(8deg)}}
@keyframes khwGrace2{0%{transform:translate(0,0) rotate(5deg)}100%{transform:translate(5vw,-5vh) rotate(-8deg)}}
@keyframes khwGrace3{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-3vw,-6vh) rotate(12deg)}}
/* env pattern wash REMOVED — the constellation now lives as cropped, full-opacity CORNER ACCENTS (.khw-corner) */
@keyframes khwPat1{to{transform:translate(-460px,-300px)}}
@keyframes khwPat2{to{transform:translate(620px,-360px)}}
@keyframes khwPat3{to{transform:translate(-380px,420px)}}
/* the constellation as a cropped, full-opacity corner accent — EIMA mood, one intentional detail */
.khw-corner{position:absolute;z-index:-1;pointer-events:none;width:clamp(240px,33vw,470px);height:clamp(240px,33vw,470px);
  background:url(assets/sys/pattern-coral.png) 0 0/clamp(150px,17vw,238px) repeat}
.khw-corner--br{right:0;bottom:0;-webkit-mask:radial-gradient(128% 128% at 100% 100%,#000 0,rgba(0,0,0,.92) 22%,transparent 60%);mask:radial-gradient(128% 128% at 100% 100%,#000 0,rgba(0,0,0,.92) 22%,transparent 60%)}
.khw-corner--tl{left:0;top:0;-webkit-mask:radial-gradient(128% 128% at 0% 0%,#000 0,rgba(0,0,0,.92) 22%,transparent 60%);mask:radial-gradient(128% 128% at 0% 0%,#000 0,rgba(0,0,0,.92) 22%,transparent 60%)}
.khw-close .khw-corner{z-index:0;width:clamp(220px,30vw,420px);height:clamp(220px,30vw,420px)}
.khw-name .khw-corner{width:clamp(300px,40vw,560px);height:clamp(300px,40vw,560px);background-image:url(assets/sys/pattern-petrol.png);background-size:clamp(132px,14vw,196px);opacity:.5}
@media (max-width:560px){.khw-corner{width:clamp(170px,56vw,300px);height:clamp(170px,56vw,300px);background-size:clamp(120px,32vw,170px)}}
/* MOBILE — same environment, re-tuned so it's alive (not a flat cream slab):
   pools enlarged + spread up the tall screen, the constellation pulled closer & brighter */
@media (max-width:680px){
  .khw-env__pool{filter:blur(52px)}
  .khw-env__pool--1{width:110vw;height:110vw;left:-28vw;top:-4vh;background:radial-gradient(circle,rgba(255,136,130,.62),rgba(255,136,130,0) 62%)}
  .khw-env__pool--2{width:104vw;height:104vw;right:-36vw;top:28vh;background:radial-gradient(circle,rgba(255,176,164,.6),rgba(255,176,164,0) 62%)}
  .khw-env__pool--3{width:100vw;height:100vw;left:-20vw;bottom:-2vh;background:radial-gradient(circle,rgba(255,150,138,.5),rgba(255,150,138,0) 64%)}
  .khw-env__spark--1{width:70vw;height:70vw;left:42vw;opacity:.11}
  .khw-env__spark--2{width:50vw;height:50vw;opacity:.085}
  .khw-env__spark--3{width:38vw;height:38vw;opacity:.12}
}
/* light sections float transparent over the env; only the close paints its own dark ground */
.khw-hero,.khw-origin,.khw-position,.khw-logo,.khw-pers,.khw-system,.khw-apps,.khw-camp{background:transparent}
.khw-hero__veil{opacity:.7}

/* ============================================================
   WO! EFFECT — the develop (blur → focus), the studio's signature
   ============================================================ */
[data-develop]{--p:0;filter:blur(calc((1 - var(--p))*10px)) brightness(calc(.66 + var(--p)*.34)) saturate(calc(.68 + var(--p)*.32)) contrast(calc(.96 + var(--p)*.04));opacity:calc(.34 + var(--p)*.66);will-change:filter,opacity}
.no-js [data-develop]{--p:1;filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){[data-develop]{--p:1!important;filter:none!important;opacity:1!important}}

/* the WO! STUDIO badge — branding, persistent */
.khw-wo{position:fixed;left:var(--gut);bottom:22px;z-index:65;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--f-sans);color:var(--ink);background:color-mix(in srgb,var(--space) 72%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:8px 15px;border-radius:40px;border:1px solid rgba(25,67,80,.12);opacity:0;transition:opacity .6s var(--e),transform .3s var(--e)}
body.is-in .khw-wo{opacity:.94}
body.wo-hide .khw-wo{opacity:0;pointer-events:none}
.khw-wo:hover{transform:translateY(-2px)}
.khw-wo b{font-weight:900;font-size:13px;letter-spacing:.01em}
.khw-wo span{font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
@media (max-width:560px){.khw-wo{left:14px;bottom:14px;padding:7px 12px}}

/* ============================================================
   LOGOGRAM — now a luminous construction moment, REAL glyphs
   ============================================================ */
.khw-logo{height:460vh;background:transparent}
.khw-logo__tag{color:var(--coral-type)}
.khw-logo .khw-spark__notch{fill:var(--ink)}
.khw-glyph{color:var(--ink)}
.khw-glyph--img{width:clamp(4.5rem,12vw,9rem);height:clamp(6rem,17vw,12.5rem);display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(14px) scale(.92);transition:opacity .6s var(--e),transform .7s var(--e)}
.khw-glyph--img img{width:100%;height:100%;object-fit:contain}
.khw-op{color:var(--ink-soft)}
.khw-logo[data-on="3"] [data-g="mark"]{filter:drop-shadow(0 0 30px rgba(255,136,130,.45))}
.khw-beat b{color:var(--ink)}
.khw-beat span{color:var(--ink-soft)}
.khw-beat i{color:var(--coral-type)}
.khw-logo__rail i{background:rgba(25,67,80,.16)}
.khw-logo__rail i.is-on{background:var(--coral)}
/* a soft cream light behind the formula, so the real petrol glyphs read cleanly on the space */
.khw-logo__stage::before{content:"";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:min(74vw,860px);height:min(40vw,440px);
  background:radial-gradient(ellipse,rgba(255,255,255,.5),transparent 70%);pointer-events:none;z-index:-1}

/* ============================================================
   SYSTEM — real pattern artwork (replaces the CSS tiles)
   ============================================================ */
.khw-pat__grid{grid-template-columns:repeat(3,1fr)}
.khw-pat__tile{background:#FBF6EE}
.khw-pat__tile--c1{background:url(assets/sys/pattern-coral.png) center/cover}
.khw-pat__tile--c2{background:url(assets/sys/pattern-petrol.png) center/cover}
.khw-pat__tile--c3{background:url(assets/sys/pattern-peach.png) center/cover}

/* ============================================================
   COLLECTIONS — seven named worlds (the brand, worn)
   ============================================================ */
.khw-cols-sec{max-width:1400px;margin:0 auto;padding:clamp(70px,12vh,150px) var(--gut)}
.khw-cols__head{max-width:52ch;margin-bottom:clamp(44px,8vh,84px)}
.khw-cols__lead{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.9rem,5.4vw,3.6rem);margin:0 0 .5em;color:var(--ink)}
.khw-cols__note{margin:0;font-weight:300;color:var(--ink-soft);font-size:clamp(1rem,2vw,1.12rem);max-width:60ch}
.khw-cols__note b{color:var(--ink);font-weight:600}
.khw-cols__note em{font-style:italic;color:var(--coral-type)}
/* collection chapters — Khokha (Zanzibar) → Farida (Khawia), each crediting WO's role */
.khw-chapter{margin-top:clamp(56px,9vh,112px)}
.khw-chapter:first-of-type{margin-top:0}
.khw-chapter__intro{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(20px,5vw,70px);align-items:end;margin-bottom:clamp(22px,3.6vh,38px);padding-bottom:clamp(15px,2.2vh,23px);border-bottom:1px solid rgba(25,67,80,.16)}
.khw-chapter__no{font-family:var(--f-sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-type);margin:0 0 .8em}
.khw-chapter__name{font-family:var(--f-disp);font-weight:300;font-size:clamp(2rem,5.2vw,3.6rem);color:var(--ink);margin:0;line-height:1;display:flex;align-items:baseline;gap:.42em}
.khw-chapter__name i{font-family:var(--f-ar);font-style:normal;font-size:.6em;color:var(--coral-type);font-weight:700}
.khw-chapter__where{font-style:italic;font-weight:300;color:var(--ink-soft);margin:.55em 0 0;font-size:clamp(.95rem,1.8vw,1.05rem)}
.khw-chapter__copy{font-weight:300;color:var(--ink-soft);font-size:clamp(1rem,2vw,1.1rem);line-height:1.55;margin:0;max-width:46ch}
.khw-chapter__role{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-sans);font-size:clamp(10px,1.5vw,11.5px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--coral-type);margin:1.15em 0 0}
.khw-chapter__role::before{content:"";width:24px;height:1.5px;background:var(--coral-type);flex:0 0 auto}
@media (max-width:760px){.khw-chapter__intro{grid-template-columns:1fr;gap:16px;align-items:start}}
.khw-cols__opener{position:relative;margin:0 0 14px;border-radius:5px;overflow:hidden;cursor:pointer;box-shadow:0 40px 90px -58px rgba(25,67,80,.55);background:var(--deep)}
.khw-cols__opener img{width:100%;height:clamp(360px,62vh,600px);object-fit:cover;object-position:center 22%;display:block;transition:transform 1.3s var(--e)}
.khw-cols__opener:hover img{transform:scale(1.03)}
.khw-cols__opener figcaption{position:absolute;left:22px;bottom:18px;color:#F6F1E8;font-family:var(--f-sans);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.khw-cols{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(170px,25vh,250px);gap:14px;grid-auto-flow:dense}
.khw-col{position:relative;grid-column:span 2;overflow:hidden;border-radius:3px;margin:0;cursor:pointer;background:var(--space-3)}
.khw-col--tall{grid-row:span 2}
.khw-col img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.khw-col:hover img{transform:scale(1.05)}
/* collection photos sit clean & bright on the light case — no caption scrim (captions removed) */
@media (max-width:760px){.khw-cols{grid-template-columns:1fr 1fr;grid-auto-rows:32vh}.khw-col{grid-column:span 1}.khw-col--tall{grid-row:span 1}}

/* ============================================================
   LOGOGRAM v2 — real vector glyphs · glass missing-piece ·
   bigger mark · the negative-space → khaawiya callout
   ============================================================ */
.khw-formula{align-items:center;gap:clamp(14px,3.4vw,48px);min-height:auto}
.khw-glyph--g,.khw-glyph--mark{display:inline-flex;align-items:center;justify-content:center;background:none!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;opacity:0;transform:translateY(14px) scale(.92);transition:opacity .6s var(--e),transform .7s var(--e)}
.khw-glyph--g{height:clamp(5.5rem,15vw,11.5rem);width:auto}
.khw-glyph__art{position:relative;height:100%;aspect-ratio:66/100;display:block}
.khw-glyph__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.khw-glass{position:absolute;border-radius:6px;background:rgba(25,67,80,.07);border:1px solid rgba(25,67,80,.32);
  -webkit-backdrop-filter:blur(6px) saturate(1.15);backdrop-filter:blur(6px) saturate(1.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 10px -4px rgba(25,67,80,.28)}
.khw-glass--k{left:6.5%;top:4.5%;width:24%;height:23%}
.khw-glass--kha{left:69%;top:72%;width:24.5%;height:24%}
.khw-glyph--mark{height:clamp(5.5rem,15.5vw,12rem);width:auto}
.khw-mark__art{position:relative;height:100%;aspect-ratio:1;display:block}
.khw-mark__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.khw-logo[data-on="0"] [data-g="k"],.khw-logo[data-on="1"] [data-g="k"],.khw-logo[data-on="2"] [data-g="k"],.khw-logo[data-on="3"] [data-g="k"]{opacity:1;transform:none}
.khw-logo[data-on="1"] [data-g="kha"],.khw-logo[data-on="2"] [data-g="kha"],.khw-logo[data-on="3"] [data-g="kha"]{opacity:1;transform:none}
.khw-logo[data-on="3"] [data-g="mark"]{opacity:1;transform:none;filter:drop-shadow(0 0 30px rgba(255,136,130,.42))}
.khw-ns-callout{max-width:48ch;margin:clamp(18px,3vh,32px) auto 0;text-align:center;font-size:clamp(.88rem,1.9vw,1.04rem);font-weight:300;line-height:1.5;
  color:var(--ink-soft);opacity:0;transform:translateY(8px);transition:opacity .6s var(--e),transform .6s var(--e)}
.khw-ns-callout i{font-style:normal;color:var(--coral-type)}
.khw-ns-callout i[lang="ar"]{font-family:var(--f-ar);color:var(--coral-type)}
.khw-ns-callout em{color:var(--coral-type);font-style:italic}
.khw-logo[data-on="3"] .khw-ns-callout{opacity:1;transform:none}

/* ===== THE RETURN — Khokha → Khawia rebrand beat ===== */
.khw-return{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,12vh,150px) var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.khw-return__fig{margin:0;border-radius:4px;overflow:hidden;box-shadow:0 44px 100px -55px rgba(25,67,80,.6);cursor:pointer;background:var(--deep)}
.khw-return__fig img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform 1.2s var(--e)}
.khw-return__fig:hover img{transform:scale(1.04)}
.khw-return__lead{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.9rem,5vw,3.4rem);margin:.3em 0 .7em;color:var(--ink);line-height:1.08;max-width:16ch}
.khw-return__body{font-weight:300;color:var(--ink-soft);font-size:clamp(1rem,2vw,1.1rem);max-width:42ch;margin:0 0 1em;line-height:1.6}
.khw-return__body em{font-style:italic;color:var(--coral-type)}
@media (max-width:760px){.khw-return{grid-template-columns:1fr;gap:30px}}

/* ============================================================
   THE SYSTEM AS THE IDENTITY — Colour · Type · Pattern · Personality
   (each its own component, not one slide — the WO! part)
   ============================================================ */
.khw-sec__head{max-width:var(--maxw);margin:0 auto clamp(34px,6vh,62px);padding:0 var(--gut)}
.khw-sec__head--mid{text-align:center}
.khw-sec__lead{font-family:var(--f-disp);font-weight:300;line-height:1.05;font-size:clamp(1.9rem,5.4vw,3.7rem);margin:.15em 0 .5em;color:var(--ink)}
.khw-sec__note{margin:0;font-weight:300;color:var(--ink-soft);font-size:clamp(1rem,2vw,1.12rem);max-width:48ch}
.khw-sec__head--mid .khw-sec__note{margin-left:auto;margin-right:auto}
.khw-k i{font-style:italic;text-transform:none;letter-spacing:.01em;opacity:.6;font-weight:400;margin-right:.45em}

/* COLOUR — expanding bands */
.khw-colour{padding:clamp(70px,12vh,150px) 0 0}
.khw-bands{display:flex;gap:6px;height:clamp(360px,60vh,600px);padding:0 var(--gut);max-width:1600px;margin:0 auto}
.khw-band{position:relative;flex:1;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;transition:flex .7s var(--e);min-width:0}
.khw-band:hover,.khw-band:focus-visible{flex:2.6;outline:none}
.khw-band__no{position:absolute;top:18px;left:22px;font-family:var(--f-sans);font-weight:700;font-size:11px;letter-spacing:.14em;opacity:.92}
.khw-band__id{display:flex;flex-direction:column;gap:2px}
.khw-band__id b{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1}
.khw-band__id span{font-size:12px;font-weight:600;opacity:1}
.khw-band__id i{font-style:normal;font-size:11px;letter-spacing:.06em;font-weight:600;opacity:.95;margin-top:6px}
.khw-band--petrol{background:#194350;color:#F6F1E8}
.khw-band--coral{background:#FF8882;color:#5a2723}
.khw-band--melon{background:#FFC2B4;color:#7a4136}
.khw-band--sage{background:#9DB3A8;color:#26352f}
.khw-band--cream{background:#EFE0CD;color:#675942}
@media (max-width:680px){.khw-bands{flex-wrap:wrap;height:auto;gap:8px}.khw-band{flex:1 1 44%;height:150px}.khw-band:hover,.khw-band:focus-visible{flex:1 1 44%}}

/* TYPE — specimen */
.khw-type-sec{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,14vh,170px) var(--gut)}
.khw-typ{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center;border-top:1px solid rgba(25,67,80,.14);padding-top:clamp(34px,5vh,56px)}
.khw-typ__aa{font-family:var(--f-sans);font-weight:900;font-size:clamp(8rem,25vw,19rem);line-height:.76;color:var(--ink);display:block;letter-spacing:-.03em}
.khw-typ__weights{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px}
.khw-typ__weights span{font-family:var(--f-sans);font-size:clamp(1rem,2vw,1.3rem);color:var(--ink-soft)}
.khw-typ__face{padding:18px 0;border-bottom:1px solid rgba(25,67,80,.12)}
.khw-typ__face b{display:block;font-family:var(--f-sans);font-weight:700;font-size:1.1rem;color:var(--ink)}
.khw-typ__face span{display:block;font-weight:300;color:var(--ink-soft);font-size:.95rem;margin-top:4px}
.khw-typ__script{font-family:var(--f-script);font-weight:600;font-size:clamp(2.6rem,6vw,4.2rem);color:var(--coral-type);line-height:1;display:block;margin-bottom:8px}
.khw-typ__sample{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.6rem,5vw,3.2rem);color:var(--ink);text-align:center;margin:clamp(40px,7vh,80px) 0 0}
@media (max-width:760px){.khw-typ{grid-template-columns:1fr;gap:26px}}

/* PATTERN — no boxes: the constellation, transparent, drifting directly on the serene environment */
.khw-pat-sec{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,12vh,150px) var(--gut)}
.khw-patshow{position:relative;overflow:hidden;min-height:clamp(42vh,52vh,600px);margin-top:clamp(8px,1.5vh,20px);
  -webkit-mask:radial-gradient(120% 86% at 50% 46%,#000 52%,transparent 92%);mask:radial-gradient(120% 86% at 50% 46%,#000 52%,transparent 92%)}
.khw-patshow__l{position:absolute;inset:-8%;background-repeat:repeat;background-position:center;mix-blend-mode:multiply}
.khw-patshow__l--coral{background-image:url(assets/sys/pattern-coral.png);background-size:clamp(180px,20vw,300px);opacity:.9;animation:khwPat1 120s linear infinite}
.khw-patshow__l--petrol{background-image:url(assets/sys/pattern-petrol.png);background-size:clamp(230px,26vw,380px);opacity:.72;animation:khwPat2 165s linear infinite}
.khw-patshow__l--peach{background-image:url(assets/sys/pattern-peach.png);background-size:clamp(160px,18vw,280px);opacity:.8;animation:khwPat3 100s linear infinite}
.khw-patshow__tones{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-family:var(--f-sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.khw-patshow__tones b{font-weight:700;color:var(--coral-type)}
@media (prefers-reduced-motion:reduce){.khw-patshow__l{animation:none}}

/* PERSONALITY — constellation */
.khw-pers{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,12vh,150px) var(--gut);text-align:center;background:transparent}
/* PERSONALITY — scroll-to-experience: pinned constellation, Serene anchors, traits orbit in */
.khw-pers{max-width:none;margin:0;padding:0;text-align:center;background:transparent}
.khw-pers[data-prack]{height:230vh;position:relative}
.khw-pers__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,22px);padding:clamp(64px,8vh,110px) var(--gut)}
.khw-pers__head{max-width:24ch}
.khw-pers__lead{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.08;margin:.12em 0 0;color:var(--ink)}
.khw-constel{position:relative;width:min(74vw,460px);height:min(74vw,460px);margin:0 auto;flex:0 0 auto}
.khw-constel__lines{position:absolute;inset:0;width:100%;height:100%}
.khw-constel__lines path{stroke-dasharray:1;stroke-dashoffset:1;opacity:.82;transition:stroke-dashoffset .6s var(--e)}
.khw-constel__lines path.is-on{stroke-dashoffset:0}
.khw-constel__ring{opacity:.32!important}
.khw-cnode{position:absolute;transform:translate(-50%,-50%);font-family:var(--f-sans);font-weight:600;font-size:clamp(.74rem,1.8vw,.98rem);color:var(--ink);
  background:var(--space);padding:9px 15px;border-radius:40px;border:1px solid rgba(25,67,80,.16);white-space:nowrap;box-shadow:0 6px 20px -12px rgba(25,67,80,.4)}
.khw-cnode[data-i]{opacity:0;transform:translate(-50%,-50%) scale(.45);transition:opacity .5s var(--e),transform .6s var(--e)}
.khw-cnode[data-i].is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.khw-cnode--core{left:50%;top:50%;background:var(--coral);color:#16323B;font-family:var(--f-disp);font-weight:500;font-size:clamp(1.1rem,3vw,1.6rem);padding:18px 28px;border:0;box-shadow:0 18px 44px -20px rgba(255,136,130,.85)}
.khw-pers__note{margin:0 auto;max-width:42ch;font-weight:300;color:var(--ink-soft);font-size:clamp(.98rem,1.9vw,1.08rem);opacity:0;transform:translateY(10px);transition:opacity .6s var(--e),transform .6s var(--e)}
.khw-pers__note.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.khw-pers[data-prack]{height:auto}.khw-pers__sticky{position:static;height:auto;padding:90px var(--gut)}.khw-cnode[data-i]{opacity:1;transform:translate(-50%,-50%)}.khw-constel__lines path{stroke-dashoffset:0}.khw-pers__note{opacity:1;transform:none}}
@media (max-width:560px){.khw-cnode{font-size:.68rem;padding:6px 9px}.khw-cnode--core{padding:12px 18px}.khw-constel{width:84vw;height:84vw}.khw-constel__lines path{stroke-width:3.2}.khw-pers[data-prack]{height:210vh}}

/* ============================================================
   INTRO — the logomark blooms from the serene space (the loader)
   ============================================================ */
/* loader — small centred mark that INKS IN progressively beside a thin progress line (mature, not a bloom) */
.khw-intro{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  background:var(--space);animation:khwIntroOut .6s var(--e) 1.85s forwards}
@keyframes khwIntroOut{to{opacity:0;visibility:hidden}}
.khw-intro__mark{position:relative;width:clamp(40px,7vw,54px);height:clamp(40px,7vw,54px)}
.khw-intro__mark .khw-spark{width:100%;height:100%;overflow:visible;-webkit-clip-path:inset(100% 0 0 0);clip-path:inset(100% 0 0 0);animation:khwInk 1.35s var(--e) .15s forwards}
.khw-intro .khw-spark__petal{fill:var(--coral)}
.khw-intro .khw-spark__notch{fill:var(--ink)}
@keyframes khwInk{to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}
.khw-intro__bar{position:relative;width:clamp(82px,17vw,118px);height:1px;background:rgba(25,67,80,.16);overflow:hidden;margin-top:clamp(19px,2.8vh,27px)}
.khw-intro__bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--coral);animation:khwBar 1.35s var(--e) .15s forwards}
@keyframes khwBar{to{width:100%}}
@media (prefers-reduced-motion:reduce){.khw-intro{display:none}}