/* ============================================================
   OpenMind Murals — Design System
   Palette: slate blue-grey / steel / ivory-white + restrained brass
   Type: Fraunces (editorial display serif) + Inter (grotesque UI)
   Built as a bespoke gallery-grade site, not a template.
   ============================================================ */

:root {
  /* Core palette — blue grey white brief */
  --ink:        #141c24;   /* near-black slate */
  --slate:      #1e2b37;   /* deep blue-grey */
  --slate-2:    #26323e;
  --steel:      #5f7688;   /* muted steel blue */
  --steel-soft: #8aa0af;
  --mist:       #c4d0d9;   /* pale blue-grey */
  --ivory:      #f5f2ec;   /* warm off-white */
  --paper:      #fbfaf6;
  --brass:      #c2a15f;   /* restrained luxury accent */
  --brass-soft: #d8c191;

  --line:       rgba(255,255,255,.14);
  --line-dark:  rgba(20,28,36,.12);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);

  --f-display: "Fraunces", "Playfair Display", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.19,1,.22,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* --- Typographic system --- */
.eyebrow {
  font-size: .74rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--steel);
  display: inline-flex;
  align-items: center;
  gap: .8em;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--brass);
  display: inline-block;
}
.eyebrow.light { color: var(--mist); }

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.02; letter-spacing: -.015em; }

.display {
  font-size: clamp(2.9rem, 8vw, 7rem);
  font-weight: 300;
  line-height: .98;
}
.display em { font-style: italic; font-weight: 400; color: var(--brass); }

h2.section-title {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 340;
}
h2.section-title em { font-style: italic; color: var(--steel); }

p.lead { font-size: clamp(1.05rem, 1.6vw, 1.32rem); color: #3a4a57; max-width: 60ch; }

/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
/* Over the hero the logo + links are white; guarantee contrast with a soft
   top scrim so they never wash out against a bright sky. */
.nav:not(.solid) { background: linear-gradient(180deg, rgba(20,28,36,.62), rgba(20,28,36,0)); }
.nav.solid {
  background: rgba(251,250,246,.86);
  backdrop-filter: blur(14px);
  padding-block: 15px;
  box-shadow: 0 1px 0 var(--line-dark);
}
.brand {
  font-family: var(--f-display);
  font-size: 1.5rem; letter-spacing: -.01em; color: #fff;
  display: flex; align-items: center; gap: .5ch;
}
.brand .dot { color: var(--brass); }
/* Nav mark: the "OpenMind" line from the company logo (dark navy artwork).
   Flat white over the hero washed out, so keep the real colour logo and
   sit it on a small light chip over the hero for guaranteed contrast. Once
   the nav turns solid (ivory) the chip dissolves and the navy logo reads on
   its own. */
.brand img {
  height: clamp(30px, 3.4vw, 40px); width: auto; display: block;
}
.nav:not(.solid) .brand {
  background: var(--ivory);
  padding: 7px 14px; border-radius: 11px;
  box-shadow: 0 6px 20px rgba(20,28,36,.28);
}
.brand, .nav.solid .brand {
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.solid .brand { color: var(--ink); background: none; padding: 0; box-shadow: none; }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
.nav-links a {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; color: #fff; position: relative; padding-block: 6px;
}
.nav.solid .nav-links a { color: var(--ink); }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: currentColor; transition: width .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color: var(--brass); }

.nav-cta {
  border: 1px solid rgba(255,255,255,.5); color:#fff;
  padding: 10px 22px; border-radius: 100px; font-size:.8rem; letter-spacing:.1em;
  text-transform: uppercase; transition: all .4s var(--ease);
}
.nav.solid .nav-cta { border-color: var(--ink); color: var(--ink); }
.nav-cta:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.burger { display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; }
.burger span { width:26px; height:2px; background:#fff; transition:.3s; }
.nav.solid .burger span { background: var(--ink); }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  min-height: 100svh; position: relative; display: flex; align-items: flex-end;
  color: var(--ivory); overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20,28,36,.30) 0%, rgba(20,28,36,.15) 40%, rgba(20,28,36,.85) 100%),
    linear-gradient(115deg, #1c2833, #2b3a48 60%, #384a5a);
  background-size: cover; background-position: center;
}
/* Crossfading hero slideshow — vibrant mural photography rotates behind
   the scrim. Slides stack absolutely and fade via opacity.

   Art-directed per breakpoint, not just resized: a wide desktop hero and
   a tall phone hero need differently-shaped source photos, or `cover`
   zooms into a sliver of a portrait photo (desktop) or crops the sides
   off a landscape one (mobile). Desktop uses landscape mural shots below;
   the mobile media query further down swaps in portrait-shaped ones. */
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover;
  opacity:0; transition:opacity 1.6s var(--ease);
}
.hero-slide.is-active { opacity:1; }
.hero-slide-1 { background-image:url("/images/work/rocomamas-portraits.jpg"); background-position:center 42%; }
.hero-slide-2 { background-image:url("/images/work/geek-house-hatfield.jpg");  background-position:center 70%; }
.hero-slide-3 { background-image:url("/images/work/afri-readymix-rosslyn.jpg"); background-position:center 38%; }
.hero-slide-4 { background-image:url("/images/work/mandelbult-rustenburg.jpg"); background-position:center; }
.hero::after {
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(20,28,36,.42), rgba(20,28,36,.28) 35%, rgba(20,28,36,.92));
}
.hero .wrap { position: relative; z-index: 2; width:100%; padding-bottom: clamp(48px, 9vh, 110px); padding-top: 140px; }

.hero .display { max-width: 15ch; }
.hero-meta {
  display:flex; flex-wrap:wrap; gap: clamp(20px,5vw,72px); align-items:flex-end;
  margin-top: clamp(28px, 5vh, 52px); padding-top: 26px; border-top: 1px solid var(--line);
}
.hero-meta p.lead { color: var(--mist); }
.hero-stats { display:flex; gap: clamp(24px,4vw,54px); }
.stat .n { font-family: var(--f-display); font-size: clamp(2rem,3.5vw,3rem); line-height:1; color:#fff; }
.stat .l { font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-soft); margin-top:6px; }

/* ------------------------------------------------------------
   GENERIC SECTION
   ------------------------------------------------------------ */
section { position: relative; }
.pad { padding-block: clamp(70px, 11vw, 160px); }
.dark { background: var(--slate); color: var(--ivory); }
.dark p.lead { color: var(--mist); }
.dark .section-title em { color: var(--brass-soft); }

.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items:center; }
.split.wide-left { grid-template-columns: 1.15fr .85fr; }

.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom: clamp(36px,6vw,68px); }
.section-head .section-title { max-width: 18ch; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding: 16px 30px; border-radius:100px; transition: all .45s var(--ease); cursor:pointer; border:1px solid transparent;
}
.btn .arrow { transition: transform .45s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn-primary { background: var(--ink); color:#fff; }
.btn-primary:hover { background: var(--brass); color: var(--ink); }
.btn-ghost { border-color: currentColor; }
.btn-ghost:hover { background: var(--ink); color:#fff; border-color: var(--ink); }
.dark .btn-ghost:hover { background:#fff; color:var(--ink); border-color:#fff; }

/* ------------------------------------------------------------
   MARQUEE (client / keyword band)
   ------------------------------------------------------------ */
.marquee { border-block:1px solid var(--line-dark); overflow:hidden; padding-block:26px; background:var(--ivory); }
.marquee.dark-band { background:var(--ink); border-color:var(--line); }
.marquee .track { display:flex; gap:60px; white-space:nowrap; width:max-content; animation: slide 30s linear infinite; }
.marquee .track span { font-family:var(--f-display); font-size: clamp(1.3rem,2.4vw,2rem); color: var(--steel); font-style:italic; display:flex; align-items:center; gap:60px; }
.marquee .track span::after{ content:"\2726"; color:var(--brass); font-style:normal; font-size:.6em; }
.marquee.dark-band .track span { color: var(--mist); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
   PORTFOLIO GRID
   ------------------------------------------------------------ */
.gallery { display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.tile { position:relative; overflow:hidden; background:var(--slate-2); }
.tile img { width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease), filter 1.1s var(--ease); filter: saturate(.92); }
.tile:hover img { transform: scale(1.06); filter: saturate(1.05); }
.tile .cap {
  position:absolute; inset:auto 0 0 0; padding: 26px 24px 22px;
  background: linear-gradient(0deg, rgba(20,28,36,.9), transparent);
  color:#fff; transform: translateY(12px); opacity:0; transition:.5s var(--ease);
}
.tile:hover .cap { transform:none; opacity:1; }
.tile .cap h4 { font-family:var(--f-display); font-size:1.4rem; font-weight:400; }
.tile .cap p { font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-soft); margin-top:4px; }
.tile .idx { position:absolute; top:18px; left:20px; font-size:.74rem; letter-spacing:.2em; color:#fff; opacity:.7; z-index:2; }

/* aspect helpers */
.t-tall  { aspect-ratio: 3/4; }
.t-wide  { aspect-ratio: 16/10; }
.t-sq    { aspect-ratio: 1/1; }
.span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }

/* ------------------------------------------------------------
   IMAGE PANEL (used in about / feature splits)
   ------------------------------------------------------------ */
.imgpanel { position:relative; aspect-ratio: 4/5; overflow:hidden; background:linear-gradient(135deg,#26323e,#3a4c5c); }
.imgpanel img { width:100%; height:100%; object-fit:cover; }
.imgpanel .tag {
  position:absolute; bottom:20px; left:20px; background:rgba(20,28,36,.72); backdrop-filter:blur(6px);
  color:#fff; padding:10px 18px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--line);
}
.imgpanel.offset { margin-top: 56px; }

/* ------------------------------------------------------------
   SERVICES
   ------------------------------------------------------------ */
.svc-row {
  display:grid; grid-template-columns: 90px 1fr auto; gap: clamp(18px,3vw,44px); align-items:baseline;
  padding-block: clamp(28px,4vw,44px); border-top:1px solid var(--line-dark); transition:.5s var(--ease);
}
.dark .svc-row { border-color: var(--line); }
.svc-row:last-child { border-bottom:1px solid var(--line-dark); }
.dark .svc-row:last-child { border-color:var(--line); }
.svc-row:hover { padding-left: 12px; }
.svc-row .num { font-family:var(--f-display); font-size:1.1rem; color:var(--brass); }
.svc-row h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight:360; }
.svc-row .desc { color:#4a5966; max-width:48ch; margin-top:10px; font-size:.98rem; }
.dark .svc-row .desc { color: var(--mist); }
.svc-row .plus { font-size:1.6rem; color:var(--steel); transition:.4s var(--ease); }
.svc-row:hover .plus { color:var(--brass); transform:rotate(90deg); }

/* ------------------------------------------------------------
   CTA STRIP
   ------------------------------------------------------------ */
.cta-strip {
  position:relative; color:var(--ivory); text-align:center; overflow:hidden;
  background: linear-gradient(180deg, rgba(20,28,36,.78), rgba(20,28,36,.88)),
              linear-gradient(120deg,#1c2833,#33465a);
  background-size:cover; background-position:center;
}
.cta-strip::before{
  content:""; position:absolute; inset:0;
  background-image:url("/images/cta-bg.jpg");
  background-size:cover; background-position:center; opacity:.35; mix-blend-mode:luminosity;
}
.cta-strip .wrap { position:relative; z-index:1; }
.cta-strip .display { margin-inline:auto; max-width:16ch; }
.cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.cta-strip .btn-primary { background:#fff; color:var(--ink); }
.cta-strip .btn-primary:hover { background:var(--brass); }
.cta-strip .btn-ghost { border-color:rgba(255,255,255,.6); color:#fff; }

/* ------------------------------------------------------------
   ABOUT bits
   ------------------------------------------------------------ */
.pull { font-family:var(--f-display); font-size: clamp(1.6rem,3.4vw,2.8rem); font-weight:340; line-height:1.18; letter-spacing:-.01em; }
.pull em { font-style:italic; color:var(--brass); }
.two-col { columns:2; column-gap:56px; }
.two-col p { margin-bottom:1.1em; break-inside:avoid; }
@media (max-width:760px){ .two-col{ columns:1; } }

.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(24px,3vw,44px); margin-top:56px; }
.value h4 { font-family:var(--f-display); font-size:1.5rem; font-weight:400; margin-bottom:8px; }
.value .n { font-family:var(--f-display); color:var(--brass); font-size:.95rem; display:block; margin-bottom:16px; }
.value p { font-size:.94rem; color:var(--mist); }

.process { counter-reset: step; }
.pstep { display:grid; grid-template-columns: 1fr 1.4fr; gap:clamp(20px,4vw,60px); padding-block:clamp(30px,4vw,50px); border-top:1px solid var(--line); align-items:start; }
.pstep .k { font-family:var(--f-display); font-size:clamp(1.8rem,3vw,2.6rem); }
.pstep .k::before { counter-increment: step; content: "0" counter(step); color:var(--brass); margin-right:.5ch; }
.pstep p { color:var(--mist); }

/* ------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------ */
.contact-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px,6vw,90px); align-items:start; }
.info-block { margin-bottom:38px; }
.info-block .k { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); margin-bottom:8px; }
.info-block .v { font-family:var(--f-display); font-size:1.5rem; font-weight:400; }
.info-block .v a:hover { color:var(--brass); }

form.book { display:grid; gap:22px; }
.field { position:relative; }
.field label { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); display:block; margin-bottom:9px; }
.field input, .field select, .field textarea {
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-dark);
  padding:12px 2px; font-family:var(--f-body); font-size:1rem; color:var(--ink); transition:border-color .4s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline:0; border-color:var(--brass); }
.field textarea { resize:vertical; min-height:110px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
form.book .btn-primary { justify-self:start; margin-top:8px; border:0; }
.form-note { font-size:.8rem; color:var(--steel); }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer { background:var(--ink); color:var(--mist); padding-block: clamp(56px,7vw,96px) 34px; }
.footer .top { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:44px; padding-bottom:56px; border-bottom:1px solid var(--line); }
/* The full logo is dark navy artwork — knocking it flat white on the dark
   footer turned it into an illegible silhouette. Show the real colour logo
   on a light plate instead, so the brand mark reads properly. */
.footer .brand { display:inline-block; margin-bottom:24px; background:var(--ivory); padding:16px 22px; border-radius:14px; line-height:0; }
.footer .brand img { width:min(200px,70vw); height:auto; display:block; filter:none; }
.footer p { max-width:40ch; font-size:.95rem; }
.footer h5 { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-soft); margin-bottom:18px; }
.footer ul { list-style:none; display:grid; gap:11px; }
.footer ul a { font-size:.95rem; } .footer ul a:hover { color:var(--brass); }
.footer .bottom { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; font-size:.8rem; letter-spacing:.04em; color:var(--steel); }

/* ------------------------------------------------------------
   WHATSAPP FLOAT
   ------------------------------------------------------------ */
.wa {
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:0; background:#25D366; color:#fff;
  border-radius:100px; padding:14px; box-shadow:0 12px 34px rgba(37,211,102,.4);
  transition:.5s var(--ease); overflow:hidden;
}
.wa svg { width:26px; height:26px; flex:0 0 auto; }
.wa .txt { max-width:0; opacity:0; white-space:nowrap; font-size:.85rem; font-weight:600; letter-spacing:.02em; transition:.5s var(--ease); }
.wa:hover { padding-inline:18px 22px; }
.wa:hover .txt { max-width:180px; opacity:1; margin-left:10px; }

/* ------------------------------------------------------------
   REVEAL ANIMATION
   ------------------------------------------------------------ */
.reveal { opacity:0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 940px){
  .split, .split.wide-left, .contact-grid { grid-template-columns:1fr; }
  .value-grid { grid-template-columns:1fr; gap:26px; }
  .footer .top { grid-template-columns:1fr; gap:34px; }
  .pstep { grid-template-columns:1fr; gap:10px; }
  .imgpanel.offset { margin-top:0; }
  .span-7,.span-5,.span-6,.span-4,.span-8 { grid-column: span 12; }
}
@media (max-width: 720px){
  .nav-links { position:fixed; inset:0 0 0 auto; width:min(78vw,340px); background:var(--slate); flex-direction:column; justify-content:center; align-items:flex-start; padding:60px 40px; gap:26px; transform:translateX(100%); transition:transform .5s var(--ease); mix-blend-mode:normal; }
  .nav-links.open { transform:none; }
  .nav-links a, .nav.solid .nav-links a { color:#fff; font-size:1rem; }
  .nav-cta { display:none; }
  .burger { display:flex; z-index:70; }
  .hero-meta { flex-direction:column; align-items:flex-start; }
  .two { grid-template-columns:1fr; }
  .marquee .track span { font-size:1.2rem; }

  /* Fill exactly one screen; centre the content block so the vibrant
     slideshow shows above and below instead of a big empty gap up top. */
  .hero { min-height: 100svh; align-items: center; }
  .hero .wrap { padding-top: 92px; padding-bottom: 40px; }
  .hero .display { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .hero-meta { margin-top: 26px; padding-top: 22px; }

  /* Swap to portrait-shaped mural photos — the landscape desktop set
     would zoom into an unrecognisable sliver of itself on a tall screen. */
  .hero-slide-1 { background-image:url("/images/work/eye-lady-big5.jpg");      background-position:center 26%; }
  .hero-slide-2 { background-image:url("/images/work/mars-growers-ceiling.jpg"); background-position:center 30%; }
  .hero-slide-3 { background-image:url("/images/work/rocomamas-live-paint.jpg"); background-position:center 30%; }
  .hero-slide-4 { background-image:url("/images/work/judy-court.jpg");         background-position:center 18%; }

  .hero::after {
    background: linear-gradient(180deg,
      rgba(20,28,36,.40), rgba(20,28,36,.26) 34%,
      rgba(20,28,36,.58) 62%, rgba(20,28,36,.93));
  }
}