/* Layout: one column of full-bleed bands; hero splits copy | live "try a colour" room; everything stacks at phone width. */
:root{
  --ink:#16152A;          /* deep indigo-black, the black of the logo */
  --paper:#FBFAF7;        /* primed-wall white */
  --wash:#EFEDF6;         /* lilac-tinted neutral band */
  --line:#DCD9E6;
  --muted:#5E5B72;
  --magenta:#D9533F;      /* logo stripe colours: coral, orange, teal, purple, green */
  --saffron:#E08A23;
  --teal:#21809A;
  --purple:#7A4C98;
  --green:#4F8B3F;
  --wordmark:"Marcellus", "Optima", "Candara", serif;
  --mark-img:url("maaya-mark.png");
  --accent:var(--magenta);
  --card:#FFFFFF;
  --on-accent:#FFFFFF;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r:14px;
  --max:1160px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F1EFF8; --paper:#121120; --wash:#1B1A2D; --line:#2E2C44; --muted:#A7A3BD;
    --magenta:#F07A63; --saffron:#F2A64A; --teal:#4CB3C9; --purple:#B08AD0; --green:#7FBF6C; --card:#1A1929; --on-accent:#16152A;
    --mark-img:url("maaya-mark-dark.png");
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#F1EFF8; --paper:#121120; --wash:#1B1A2D; --line:#2E2C44; --muted:#A7A3BD;
  --magenta:#F07A63; --saffron:#F2A64A; --teal:#4CB3C9; --purple:#B08AD0; --green:#7FBF6C; --card:#1A1929; --on-accent:#16152A;
    --mark-img:url("maaya-mark-dark.png");
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem);font-weight:800}
h2{font-size:clamp(2rem,4vw,3rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:20px}
.band{padding-block:clamp(64px,9vw,112px)}
.eyebrow{font:600 .78rem/1 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--teal);margin-bottom:14px;display:block}
.lede{color:var(--muted);max-width:60ch;font-size:1.08rem}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px;border-radius:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 1rem/1 var(--body);padding:16px 22px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease, background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn svg{width:18px;height:18px;flex:none}

/* Nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark{width:54px;aspect-ratio:318/250;background:var(--mark-img) center/contain no-repeat;flex:none}
.wm{display:grid;gap:5px;line-height:1}
.wm b{font:400 1.55rem/1 var(--wordmark);letter-spacing:.04em;font-weight:400}
.wm i{font:600 .62rem/1 "Josefin Sans",var(--body);font-style:normal;letter-spacing:.42em;padding-left:.15em}
.wm i span:nth-child(1){color:var(--teal)}.wm i span:nth-child(2){color:var(--magenta)}.wm i span:nth-child(3){color:var(--saffron)}
.wm i span:nth-child(4){color:var(--purple)}.wm i span:nth-child(5){color:var(--green)}.wm i span:nth-child(6){color:#C0533A}
.brand .logo{display:block;height:54px;width:auto;color:var(--ink);overflow:visible}
footer .brand .logo{height:72px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-weight:500;font-size:.96rem}
.nav ul a{text-decoration:none;color:var(--muted)}
.nav ul a:hover{color:var(--ink)}
.nav .btn{padding:12px 18px;font-size:.92rem}
@media (max-width:900px){.nav ul{display:none}}

/* Hero */
.hero{padding-block:clamp(40px,6vw,80px) clamp(56px,7vw,96px)}
.hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero-copy{min-width:0;display:grid;gap:22px}
.hero h1 .magic{background:linear-gradient(100deg,var(--teal),var(--magenta) 30%,var(--saffron) 55%,var(--purple) 78%,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:10px;padding-top:22px;border-top:1px solid var(--line)}
.facts div{font-size:.92rem;color:var(--muted)}
.facts strong{display:block;font:800 1.6rem/1.1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}

.studio{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 30px 60px -40px rgba(22,21,42,.45)}
.room{display:block;width:100%;height:auto;border-radius:12px}
.studio-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 6px 4px}
.studio-bar p{font-size:.88rem;color:var(--muted)}
.studio-bar p b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{width:34px;height:34px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;transition:transform .15s}
.chip:hover{transform:scale(1.08)}
.chip[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
#wallNew{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
#wallNew.sweep{transition:transform .9s cubic-bezier(.65,.05,.3,1)}
#roller{transition:transform .9s cubic-bezier(.65,.05,.3,1)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* Brands */
.brands{background:var(--ink);color:var(--paper);padding-block:26px}
.brands .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px}
.brands span{font:600 .78rem/1.3 var(--body);text-transform:uppercase;letter-spacing:.14em;opacity:.7;max-width:22ch}
.brands ul{display:flex;flex-wrap:wrap;gap:10px 30px;list-style:none;margin:0;padding:0;font:700 1.15rem/1 var(--display)}

/* Services */
.head{display:grid;gap:16px;margin-bottom:44px;max-width:720px}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:grid;gap:10px;align-content:start}
.svc .swatch{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;margin-bottom:6px}
.svc .swatch svg{width:24px;height:24px}
.svc p{color:var(--muted);font-size:.98rem}
.svc .for{font-size:.84rem;color:var(--ink);font-weight:500}
@media (max-width:900px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.services{grid-template-columns:1fr}}

/* Process */
.process-band{background:var(--wash)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:s;border-top:2px solid var(--ink)}
.steps li{counter-increment:s;padding:22px 20px 6px 0;display:grid;gap:8px;align-content:start;min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);font:800 2.4rem/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.steps li:nth-child(1)::before{color:var(--magenta);-webkit-text-stroke:0}
.steps p{font-size:.94rem;color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:6px 24px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Promise */
.promise{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.promise ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.promise li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.promise li:first-child{border-top:1px solid var(--line)}
.promise li svg{width:22px;height:22px;color:var(--teal);margin-top:3px}
.promise li b{display:block;font-weight:600}
.promise li span{color:var(--muted);font-size:.96rem}
@media (max-width:860px){.promise{grid-template-columns:1fr}}

/* Projects */
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.proj{border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);display:grid}
.proj .art{aspect-ratio:4/3;max-width:100%;display:block}
.proj .meta{padding:18px 20px;display:grid;gap:4px}
.proj .meta span{font-size:.84rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.proj-note{margin-top:22px;color:var(--muted);font-size:.95rem}
@media (max-width:860px){.projects{grid-template-columns:1fr}}

/* Quote */
.quote-band{background:var(--ink);color:var(--paper)}
.quote-band .eyebrow{color:var(--saffron)}
.quote-band .lede{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.quote{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.contact-list{display:grid;gap:18px;margin-top:30px}
.contact-list div{display:grid;gap:2px}
.contact-list span{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;opacity:.65}
.contact-list b{font:700 1.2rem/1.3 var(--display);user-select:all}
form{background:var(--paper);color:var(--ink);border-radius:20px;padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .full{grid-column:1/-1}
label{display:grid;gap:6px;font-size:.88rem;font-weight:600;min-width:0}
input,select,textarea{font:400 1rem/1.4 var(--body);padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
textarea{min-height:90px;resize:vertical}
fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
legend{font-size:.88rem;font-weight:600;margin-bottom:8px;padding:0}
.tick input{position:absolute;opacity:0;width:1px;height:1px}
.tick span{display:inline-block;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:.9rem;font-weight:500;cursor:pointer;background:var(--card)}
.tick input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tick input:focus-visible + span{outline:3px solid var(--saffron);outline-offset:2px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.form-foot small{color:var(--muted);font-size:.84rem;flex:1 1 220px}
.err{color:var(--magenta);font-size:.86rem;font-weight:500}
.sent{grid-column:1/-1;background:var(--wash);border-radius:12px;padding:18px;display:grid;gap:12px}
.sent pre{margin:0;white-space:pre-wrap;font:400 .9rem/1.5 var(--body);color:var(--muted)}
.sent .row{display:flex;flex-wrap:wrap;gap:10px}
.wa{background:#1F9D55;color:#fff}
@media (max-width:860px){.quote{grid-template-columns:1fr}}
@media (max-width:520px){form{grid-template-columns:1fr}}

/* Footer */
footer{padding-block:48px 36px;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.foot h4{font:600 .78rem/1 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 12px}
.foot p,.foot li{font-size:.93rem;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.reg{font-variant-numeric:tabular-nums}
.legal{margin-top:36px;font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
@media (max-width:760px){.foot{grid-template-columns:1fr}}

/* Floating WhatsApp */
.float-wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;width:56px;height:56px;border-radius:50%;background:#1F9D55;display:grid;place-items:center;box-shadow:0 12px 24px -10px rgba(0,0,0,.45)}
.float-wa svg{width:28px;height:28px;color:#fff}

/* Founders page */
.page-hero{padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,64px)}
.page-hero .wrap{display:grid;gap:20px;max-width:860px;margin-inline:auto}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4rem)}
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.founder{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,34px);display:grid;gap:16px;align-content:start;min-width:0}
.portrait{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font:400 2.3rem/1 var(--wordmark);color:#fff;letter-spacing:.04em}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.founder .role{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--teal);font-weight:600}
.founder h2{font-size:clamp(1.7rem,3vw,2.2rem)}
.founder p{color:var(--muted)}
.founder dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:6px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.93rem}
.founder dt{color:var(--muted)}
.founder dd{margin:0;font-weight:500}
@media (max-width:760px){.founders{grid-template-columns:1fr}}
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.story p+p{margin-top:14px}
.story .lede{max-width:none}
@media (max-width:860px){.story{grid-template-columns:1fr}}
.timeline{list-style:none;margin:0;padding:0;display:grid;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 26px 26px;display:grid;gap:4px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-8px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--teal)}
.timeline li:last-child::before{background:var(--magenta);border-color:var(--magenta)}
.timeline time{font-size:.82rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.timeline b{font:700 1.08rem/1.3 var(--display)}
.cta-band{background:var(--ink);color:var(--paper)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.cta-band .btn-primary{background:var(--paper);color:var(--ink)}
.nav ul a[aria-current="page"]{color:var(--ink);font-weight:600}
.proj img.art{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--wash)}
.founder-solo{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.founder-solo .portrait{width:100%;height:auto;aspect-ratio:1;border-radius:20px;font-size:4rem}
.founder-solo .portrait img{border-radius:20px}
.founder-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.founder-links .btn{padding:12px 18px;font-size:.92rem}
@media (max-width:720px){.founder-solo{grid-template-columns:1fr}.founder-solo .portrait{max-width:240px}}

.founder-solo .portrait.photo{aspect-ratio:4/5;background:var(--wash);overflow:hidden;box-shadow:0 30px 60px -40px rgba(22,21,42,.5)}
.founder-solo .portrait.photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Photo wall try-on */
.tryon{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1600/1067;max-width:100%;background:var(--wash)}
.tryon img{display:block;width:100%;height:100%;object-fit:cover}
.paint{position:absolute;inset:0;mix-blend-mode:multiply;-webkit-mask:url("photos/room-wall-mask.png") center/100% 100% no-repeat;mask:url("photos/room-wall-mask.png") center/100% 100% no-repeat;transition:background-color .2s}
#paintNew{clip-path:inset(0 100% 0 0)}
#paintNew.go{clip-path:inset(0 0 0 0);transition:clip-path .95s cubic-bezier(.65,.05,.3,1)}
.chip-white{box-shadow:0 0 0 1px var(--muted)}

/* Photo service cards */
.svc.photo{position:relative;overflow:hidden;border:0;min-height:320px;align-content:end;color:#fff;background:#1c1b2c;isolation:isolate}
.svc.photo .svc-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;transition:transform .6s ease}
.svc.photo .svc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,26,.08) 15%,rgba(14,13,26,.55) 50%,rgba(14,13,26,.9))}
.svc.photo:hover .svc-bg{transform:scale(1.04)}
.svc.photo h3{color:#fff}
.svc.photo p{color:rgba(255,255,255,.86)}
.svc.photo .for{color:rgba(255,255,255,.95);font-weight:600}
.svc.photo .swatch{box-shadow:0 6px 18px -6px rgba(0,0,0,.5)}

.story.story-solo{grid-template-columns:1fr;max-width:860px}