:root {
    --bg: #f7f5f1;
    --bg-card: #fffefb;
    --ink: #171310;
    --ink-soft: #5b544c;
    --ink-faint: #9a938a;
    --accent: #a1743f;
    --accent-deep: #8a5f30;
    --accent-2: #c9a061;
    --line: #e7e1d6;
    --shadow: 0 24px 48px -28px rgba(23,19,16,0.22);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased;
  }
  @media (prefers-reduced-motion: reduce) { *{animation:none!important;transition:none!important} html{scroll-behavior:auto} .reveal,.stagger>*{opacity:1!important;transform:none!important;filter:none!important} }
  h1,h2,h3 { font-family:'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; }
  .fun { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
  .eyebrow { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 600; font-family:'Plus Jakarta Sans',sans-serif; }

  nav {
    position: fixed; top: 0; left:0; right:0; z-index: 100; display: flex; justify-content: space-between; align-items: center;
    padding: 1rem clamp(1.2rem,5vw,4rem); background: rgba(251,247,240,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid transparent; transition: border-color .3s;
  }
  nav.scrolled { border-color: var(--line); }
  .logo { display: flex; align-items: center; gap: .6rem; font-family: 'Fredoka',sans-serif; font-weight: 700; font-size: 1.2rem; }
  .logo .mark { width: 34px; height: 34px; background: var(--accent); border-radius: 50% 50% 50% 8px; display: grid; place-items: center; color: #fff; font-weight: 800; transform: rotate(-4deg); }
  .nav-links { display: flex; gap: 2rem; align-items: center; }
  .nav-links a { color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: .95rem; transition: color .2s; }
  .nav-links a:hover { color: var(--accent-deep); }
  .nav-cta { background: var(--ink); color: #fff !important; padding: .6rem 1.2rem; border-radius: 100px; }
  .nav-cta:hover { background: var(--accent) !important; }
  .nav-toggle { display:none; background:none;border:none;font-size:1.4rem;cursor:pointer; }
  @media (max-width:760px){
    .nav-links{display:none}
    .nav-toggle{display:block}
    .nav-links.open { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:rgba(251,247,240,.98); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:2px solid var(--line); padding:.4rem 1.4rem 1.2rem; box-shadow:0 18px 30px rgba(42,35,32,.08); }
    .nav-links.open a { padding:.75rem 0; font-size:1.05rem; }
    .nav-links.open .nav-cta { margin-top:.6rem; text-align:center; padding:.75rem 1.2rem; }
  }

  .hero { min-height: 100vh; display: flex; align-items:center; justify-content:center; padding:6rem clamp(1.2rem,5vw,4rem) 3rem; position: relative; overflow: hidden; }
  .blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; z-index:0; }
  .blob.b1 { width: 380px; height: 380px; background: var(--accent-2); top: -80px; right: -60px; animation: float1 9s ease-in-out infinite; }
  .blob.b2 { width: 300px; height: 300px; background: var(--accent); bottom: -100px; left: -80px; opacity:.22; animation: float2 11s ease-in-out infinite; }
  .hero-inner { position: relative; z-index: 2; display:flex; align-items:center; justify-content:center; gap:clamp(1.5rem,4vw,3rem); max-width:1040px; width:100%; margin:0 auto; }
  .hero-mascot { width:230px; height:255px; flex-shrink:0; align-self:center; }
  .hero-copy { text-align:left; max-width:560px; }
  .hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); background:var(--bg-card); border:2px solid var(--line); padding:.4rem .9rem; border-radius:100px; margin-bottom:1.4rem; }
  .hero-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
  .hero h1 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-.03em; font-size: clamp(2.3rem, 5.2vw, 4rem); line-height:1.08; margin-bottom: 1.4rem; color:var(--ink); }
  .hero h1 .hi { font-family:'Fredoka',sans-serif; font-weight:700; color: var(--accent); position: relative; white-space: nowrap; }
  .hero h1 .hi::after { content:''; position:absolute; left:0; right:0; bottom: -1px; height: 9px; background: var(--accent-2); z-index:-1; border-radius: 4px; transform: rotate(-1deg); }
  .hero p { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1rem,1.4vw,1.18rem); color: var(--ink-soft); margin-bottom: 2rem; font-weight: 500; line-height:1.6; }
  .hero-actions { display:flex; gap: 1rem; flex-wrap: wrap; }
  .btn { display:inline-flex; align-items:center; gap:.5rem; padding: 1rem 1.8rem; border-radius: 100px; font-weight: 800; font-size: 1rem; text-decoration:none; cursor:pointer; border:none; font-family:'Nunito',sans-serif; transition: transform .2s, box-shadow .3s; }
  .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 0 var(--accent-deep); }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--accent-deep); }
  .btn-primary:active { transform: translateY(2px); box-shadow: 0 4px 0 var(--accent-deep); }
  .btn-ghost { background: var(--bg-card); color: var(--ink); border: 2px solid var(--line); }
  .btn-ghost:hover { transform: translateY(-3px); border-color: var(--accent); }
  .hero-strip { margin-top: 2rem; display:flex; gap: 1.6rem; flex-wrap: wrap; align-items:center; }
  .hero-strip span { font-family:'Plus Jakarta Sans',sans-serif; font-weight: 600; color: var(--ink-soft); display:flex; align-items:center; gap:.45rem; font-size:.95rem; }
  .hero-strip .em { font-size: 1.15rem; }
  .hero-strip .flag { display:inline-block; border-radius:3px; overflow:hidden; line-height:0; box-shadow:0 0 0 1px rgba(0,0,0,.1); }
  .hero-strip .flag + .flag { margin-left:2px; }
  @media (max-width:820px){
    .hero-inner{ flex-direction:column; text-align:center; gap:1rem; }
    .hero-copy{ text-align:center; }
    .hero-actions,.hero-strip{ justify-content:center; }
    .hero-mascot{ width:150px; height:165px; }
  }
  section { padding: clamp(4rem,9vw,7rem) clamp(1.2rem,5vw,4rem); position: relative; }
  .sec-head { max-width: 680px; margin-bottom: 3rem; }
  .sec-head .eyebrow { display:block; margin-bottom: .8rem; }
  .sec-head h2 { font-size: clamp(2rem,5vw,3.4rem); }
  .sec-head p { color: var(--ink-soft); margin-top: 1rem; font-weight: 600; font-size: 1.05rem; }
  .reveal { opacity:0; transform: translateY(48px); filter:blur(6px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); will-change:opacity, transform; }
  .reveal.in { opacity:1; transform:none; filter:blur(0); }
  /* gentle stagger: children of a revealed grid come in one after another */
  .stagger > * { opacity:0; transform:translateY(40px); filter:blur(5px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1); }
  .stagger.in > * { opacity:1; transform:none; filter:blur(0); }
  .stagger.in > *:nth-child(1){ transition-delay:.05s } .stagger.in > *:nth-child(2){ transition-delay:.13s }
  .stagger.in > *:nth-child(3){ transition-delay:.21s } .stagger.in > *:nth-child(4){ transition-delay:.29s }
  .stagger.in > *:nth-child(5){ transition-delay:.37s } .stagger.in > *:nth-child(6){ transition-delay:.45s }

  .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 1.4rem; }
  .service { background: var(--bg-card); border: 2px solid var(--line); border-radius: 20px; padding: 2rem 1.8rem; transition: transform .25s, box-shadow .25s, border-color .25s; }
  .service:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--accent); }
  .service .ic { width: 52px; height: 52px; border-radius: 14px; display:grid; place-items:center; font-size: 1.6rem; margin-bottom: 1.2rem; background: var(--accent-2); transform: rotate(-3deg); }
  .service h3 { font-size: 1.3rem; margin-bottom: .6rem; }
  .service p { color: var(--ink-soft); font-size: .95rem; font-weight: 600; }
  .service .price { margin-top: 1.2rem; font-weight: 800; color: var(--accent-deep); font-size: .95rem; }

  .process { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 1.5rem; }
  .step { background: var(--bg-card); border:2px solid var(--line); border-radius: 20px; padding: 1.8rem; position: relative; }
  .step .n { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color:#fff; font-weight:800; display:grid; place-items:center; margin-bottom: 1rem; font-family:'Fredoka',sans-serif; }
  .step h3 { font-size: 1.15rem; margin-bottom: .5rem; }
  .step p { color: var(--ink-soft); font-size: .92rem; font-weight: 600; }

  .work-card { background: var(--bg-card); border:2px solid var(--line); border-radius: 24px; overflow:hidden; display:grid; grid-template-columns: 1fr 1fr; transition: box-shadow .3s, border-color .3s; }
  .work-card:hover { box-shadow: var(--shadow); border-color: var(--accent); }
  .work-visual { background: linear-gradient(135deg, var(--accent-2), var(--accent)); min-height: 300px; display:grid; place-items:center; position: relative; overflow:hidden; }
  .work-visual .emoji { font-size: 5rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); }
  .work-visual .shot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
  .work-visual .tape { position:absolute; top: 20px; left: -40px; background: var(--ink); color:#fff; font-weight:800; font-size:.8rem; padding:.4rem 3rem; transform: rotate(-8deg); letter-spacing:.1em; }
  .work-info { padding: 2.4rem; display:flex; flex-direction:column; justify-content:center; }
  .work-info h3 { font-size: 1.7rem; margin: .6rem 0 .8rem; }
  .work-info p { color: var(--ink-soft); font-weight:600; margin-bottom: 1.4rem; }
  .tags { display:flex; flex-wrap:wrap; gap:.5rem; }
  .tag { background: var(--bg); border:2px solid var(--line); border-radius: 100px; padding:.3rem .9rem; font-size:.78rem; font-weight:700; color: var(--ink-soft); }
  @media (max-width:780px){ .work-card{grid-template-columns:1fr} }

  .cta-band { text-align:center; background: var(--ink); color: #fff; border-radius: 32px; margin: 0 clamp(1.2rem,5vw,4rem); }
  .cta-band h2 { font-size: clamp(2rem,6vw,4rem); margin-bottom: 1rem; }
  .cta-band h2 .y { color: var(--accent-2); }
  .cta-band p { color: #d9cfc5; max-width: 460px; margin: 0 auto 2rem; font-weight:600; }

  .contact-wrap { display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items:start; }
  @media (max-width:780px){ .contact-wrap{grid-template-columns:1fr; gap:2.5rem} }
  .field { margin-bottom: 1.2rem; }
  .field label { display:block; font-weight:800; font-size:.85rem; margin-bottom:.4rem; }
  .field input, .field textarea { width:100%; background: var(--bg-card); border:2px solid var(--line); border-radius: 14px; padding:.85rem 1rem; font-family:inherit; font-size:.95rem; font-weight:600; color:var(--ink); transition: border-color .2s; }
  .field input:focus, .field textarea:focus { outline:none; border-color: var(--accent); }
  .field textarea { resize:vertical; min-height: 110px; }
  .c-side .ci { margin-bottom: 1.6rem; }
  .c-side .ci .k { font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:.25rem; }
  .c-side .ci .v { font-weight:700; font-size:1.05rem; }
  .c-side .ci .v a { color: var(--accent-deep); text-decoration:none; }
  .form-note { font-size:.82rem; color: var(--ink-faint); margin-top:.7rem; font-weight:600; }

  footer { padding: 2.5rem clamp(1.2rem,5vw,4rem); border-top: 2px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top: 4rem; }
  footer .fnote { color: var(--ink-faint); font-weight:600; font-size:.9rem; }
  footer .fr { display:flex; gap:1.4rem; }
  footer .fr a { color: var(--ink-soft); text-decoration:none; font-weight:700; font-size:.9rem; }
  footer .fr a:hover { color: var(--accent-deep); }


  /* ---------- About ---------- */
  .about { display:grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items:center; max-width:900px; }
  .about-photo { position:relative; }
  .about-photo img { width:100%; border-radius: 24px; display:block; border:3px solid var(--bg-card); box-shadow: var(--shadow); }
  .about-photo .sticker { position:absolute; bottom:-12px; right:-12px; background:var(--accent-2); color:var(--ink); font-family:'Fredoka',sans-serif; font-weight:700; padding:.45rem .9rem; border-radius:100px; transform:rotate(-5deg); box-shadow:0 5px 0 rgba(0,0,0,.08); font-size:.82rem; }
  .about-text h2 { font-size:clamp(1.8rem,4.5vw,3rem); margin-bottom:1.2rem; }
  .about-text p { color:var(--ink-soft); font-weight:600; margin-bottom:1rem; font-size:1.05rem; }
  .about-text .sig { font-family:'Fredoka',sans-serif; font-weight:700; color:var(--accent-deep); font-size:1.3rem; margin-top:.4rem; }
  @media (max-width:780px){ .about{ grid-template-columns:1fr; gap:2rem; text-align:center; } .about-photo{ max-width:200px; margin:0 auto; } }


  /* ---------- Testimonials ---------- */
  .tmn { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; }
  .tcard { background:var(--bg-card); border:2px solid var(--line); border-radius:20px; padding:2rem 1.8rem; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
  .tcard:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
  .tcard .stars { color:var(--accent-2); font-size:1.1rem; letter-spacing:2px; margin-bottom:1rem; -webkit-text-stroke:0.6px var(--accent-deep); }
  .tcard .quote { color:var(--ink); font-weight:600; font-size:1.02rem; flex-grow:1; line-height:1.55; }
  .tcard .who { display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; }
  .tcard .who .av { width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; font-family:'Fredoka',sans-serif; font-weight:700; display:grid; place-items:center; flex-shrink:0; }
  .tcard .who .nm { font-weight:800; font-size:.95rem; } .tcard .who .rl { color:var(--ink-faint); font-size:.82rem; font-weight:600; }
  .tnote { text-align:center; color:var(--ink-faint); font-weight:600; font-size:.85rem; margin-top:2rem; }
  /* ---------- FAQ ---------- */
  .faq { max-width:760px; }
  .qa { border-bottom:2px solid var(--line); }
  .qa button { width:100%; background:none; border:none; text-align:left; padding:1.5rem 0; font-family:'Nunito',sans-serif; font-weight:800; font-size:1.1rem; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
  .qa button .pl { color:var(--accent); font-size:1.4rem; transition:transform .3s; flex-shrink:0; }
  .qa.open button .pl { transform:rotate(45deg); }
  .qa .ans { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; color:var(--ink-soft); font-weight:600; }
  .qa.open .ans { max-height:300px; padding-bottom:1.5rem; }


  /* ---------- Mascot ---------- */
  .mascot { width:100%; height:100%; display:block; overflow:visible; }
  .mascot .body-g { transform-origin:70px 140px; animation:breathe 3.2s ease-in-out infinite; }
  .mascot .eye { animation:blink 4s infinite; transform-origin:center; }
  .mascot .cheek { animation:none; }
  /* idle fidget: whole character does a tiny periodic wobble */
  .mascot.idle .body-g { animation:breathe 3.2s ease-in-out infinite, fidget 6s ease-in-out infinite; }
  /* waving arm */
  .mascot .arm-wave { transform-origin:103px 84px; animation:wavearm 2.2s ease-in-out infinite; }
  /* hammering arm */
  .mascot .arm-hammer { transform-origin:103px 84px; animation:hammer 1s ease-in-out infinite; }
  /* thumbs-up arm pop */
  .mascot .arm-thumb { transform-origin:103px 84px; animation:thumbpop 2.4s ease-in-out infinite; }
  /* legs little bounce */
  .mascot .leg-l { transform-origin:59px 118px; } .mascot .leg-r { transform-origin:81px 118px; }
  .mascot.bouncy .leg-l { animation:legbounce 1s ease-in-out infinite; }
  .mascot.bouncy .leg-r { animation:legbounce 1s ease-in-out infinite .5s; }
  @media (prefers-reduced-motion: reduce){ .mascot *{animation:none!important} }

  .hero-mascot { width:130px; height:145px; margin-bottom:.4rem; }

  /* presenting rows: mascot slides/walks in from the left */
  .present { position:relative; display:flex; align-items:flex-start; gap:1rem; margin-bottom:2rem; }
  .present .m-wrap { width:88px; height:96px; flex-shrink:0; opacity:0; transform:translateX(-60px) rotate(-8deg); }
  .present.in .m-wrap { animation:walkin .7s cubic-bezier(.34,1.4,.5,1) forwards; }
  .present .bubble { background:var(--bg-card); border:2px solid var(--line); border-radius:16px 16px 16px 4px; padding:.7rem 1.1rem; font-weight:700; color:var(--ink); font-size:.95rem; position:relative; top:14px; box-shadow:0 4px 0 rgba(0,0,0,.05); opacity:0; transform:translateY(8px) scale(.9); transform-origin:left center; }
  .present.in .bubble { animation:pop .5s .55s cubic-bezier(.34,1.5,.5,1) forwards; }

  @keyframes breathe { 0%,100%{transform:translateY(0) scaleX(1)} 50%{transform:translateY(-5px) scaleX(1.03)} }
  @keyframes fidget { 0%,88%,100%{transform:rotate(0)} 92%{transform:rotate(4deg)} 96%{transform:rotate(-3deg)} }
  @keyframes blink { 0%,93%,100%{transform:scaleY(1)} 96%{transform:scaleY(.1)} }

  /* ---------- Hero mascot: one smooth move ---------- */
  /* Gentle continuous idle (breathe + soft sway) with a single, well-eased wave.
     No pose-switching, no snapping — just one clean, friendly wave on a calm loop. */
  .mascot.hero-star .body-g {
    transform-origin:70px 142px;
    animation:heroBreathe 4s ease-in-out infinite;
  }
  .mascot.hero-star .hero-arm {
    /* pivot at the shoulder so the arm stays attached */
    transform-origin:99px 84px;
    animation:heroWave 4s ease-in-out infinite;
    will-change:transform;
  }
  .mascot.hero-star .hero-hand {
    /* hand counter-rotates a touch so the wave feels loose, not stiff */
    transform-origin:103px 74px;
    animation:heroHand 4s ease-in-out infinite;
  }
  .mascot.hero-star .head-g {
    transform-origin:70px 60px;
    animation:heroHeadTilt 4s ease-in-out infinite;
  }
  .mascot.hero-star .eye { animation:blink 5s infinite; transform-origin:center; }
  @media (prefers-reduced-motion: reduce){ .mascot.hero-star *{animation:none!important} }

  /* Soft breathing + the gentlest vertical sway. */
  @keyframes heroBreathe {
    0%,100% { transform:translateY(0) scaleX(1) scaleY(1); }
    50%     { transform:translateY(-4px) scaleX(1.02) scaleY(0.99); }
  }
  /* ONE wave: arm eases up, sways twice softly, eases down, then rests a beat.
     Smooth cubic easing on every step; small angle range keeps it graceful. */
  @keyframes heroWave {
    0%   { transform:rotate(2deg); }
    12%  { transform:rotate(-18deg); }   /* raise */
    24%  { transform:rotate(-30deg); }   /* up */
    33%  { transform:rotate(-20deg); }   /* sway in */
    42%  { transform:rotate(-30deg); }   /* sway out */
    51%  { transform:rotate(-20deg); }   /* sway in */
    60%  { transform:rotate(-28deg); }   /* sway out */
    72%  { transform:rotate(2deg); }     /* ease back down */
    100% { transform:rotate(2deg); }     /* rest before repeating */
  }
  /* Hand loosely follows the wave for a natural wrist. */
  @keyframes heroHand {
    0%,72%,100% { transform:rotate(0deg); }
    24%  { transform:rotate(10deg); }
    33%  { transform:rotate(-8deg); }
    42%  { transform:rotate(10deg); }
    51%  { transform:rotate(-8deg); }
    60%  { transform:rotate(8deg); }
  }
  /* Head tilts toward the wave, then relaxes. */
  @keyframes heroHeadTilt {
    0%,100% { transform:rotate(0deg); }
    24%,60% { transform:rotate(-4deg); }
    72%     { transform:rotate(0deg); }
  }


  /* ---------- Section background treatments ---------- */
  /* Blueprint (dark) on the process section */
  #process {
    background:var(--ink);
    background-image:linear-gradient(rgba(255,210,63,.10) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,210,63,.10) 1px,transparent 1px);
    background-size:44px 44px;
    position:relative;
  }
  #process::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 90% 80% at 50% 45%, transparent 30%, rgba(20,17,15,.55) 95%); }
  #process > * { position:relative; z-index:2; }
  #process .eyebrow { color:var(--accent-2); }
  #process .sec-head h2 { color:#fff; }
  #process .step { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.12); backdrop-filter:blur(2px); }
  #process .step h3 { color:#fff; }
  #process .step p { color:#d9cfc5; }
  #process .step .n { background:var(--accent); color:#fff; box-shadow:0 0 0 6px rgba(255,107,74,.15); }

  /* Pale-coral alternating section on Reviews */
  #reviews { background:linear-gradient(180deg,#fff3ee,#ffe8e0); }


  /* ---- Layout: SPLIT ---- */
  .mk-site.lay-split .mk-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:0; padding:0; }
  .mk-site.lay-split .mk-hero-txt { padding:1.6rem 1.3rem; align-self:center; }
  .mk-site.lay-split .mk-hero-img { background:linear-gradient(135deg, var(--mkc), color-mix(in srgb, var(--mkc) 55%, #000)); min-height:170px; display:grid; place-items:center; color:#fff; font-size:2.4rem; }
  .mk-site.lay-split .mk-hero h3 { font-size:1.35rem; }
  .mk-site.lay-split .mk-cards { grid-template-columns:1fr; gap:.5rem; }
  .mk-site.lay-split .mk-card { display:flex; align-items:center; gap:.6rem; }
  .mk-site.lay-split .mk-card .mk-ic { margin-bottom:0; flex-shrink:0; }
  .mk-site.lay-split .mk-card .mk-cbody { }
  /* ---- Layout: SHOWCASE ---- */
  .mk-site.lay-showcase .mk-hero { padding:0; position:relative; min-height:210px; display:flex; align-items:flex-end; color:#fff;
    background:linear-gradient(155deg, color-mix(in srgb, var(--mkc) 88%, #000) 0%, color-mix(in srgb, var(--mkc) 40%, #0a0a0a) 100%); }
  .mk-site.lay-showcase .mk-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); }
  .mk-site.lay-showcase .mk-hero-inner{ position:relative; z-index:2; padding:1.5rem 1.3rem; width:100%; }
  .mk-site.lay-showcase .mk-hero .mk-eye{ color:rgba(255,255,255,.9); }
  .mk-site.lay-showcase .mk-hero h3{ color:#fff; font-size:1.5rem; }
  .mk-site.lay-showcase .mk-hero h3 .mk-accent{ color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.5); }
  .mk-site.lay-showcase .mk-hero p{ color:rgba(255,255,255,.9); }
  .mk-site.lay-showcase .mk-b2{ background:rgba(255,255,255,.2); color:#fff; }
  .mk-site.lay-showcase .mk-statbar{ display:grid; grid-template-columns:repeat(3,1fr); background:#111; color:#fff; }
  .mk-site.lay-showcase .mk-statbar div{ padding:.8rem; text-align:center; border-right:1px solid rgba(255,255,255,.1); }
  .mk-site.lay-showcase .mk-statbar div:last-child{ border:none; }
  .mk-site.lay-showcase .mk-statbar .n{ font-weight:800; font-size:1.1rem; color:var(--mkc); }
  .mk-site.lay-showcase .mk-statbar .l{ font-size:.58rem; color:#bbb; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

  /* ============ INSTANT MOCKUP GENERATOR ============ */
  #mockup { position:relative; }
  .mk-head { max-width:680px; margin:0 auto 3rem; text-align:center; }
  .mk-head .eyebrow { display:inline-block; margin-bottom:.9rem; background:var(--accent); color:#fff; padding:.35rem .9rem; border-radius:100px; font-family:'Plus Jakarta Sans',sans-serif; }
  .mk-head h2 { font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(2rem,5vw,3.2rem); }
  .mk-head h2 .hl-y { color:var(--accent); position:relative; }
  .mk-head h2 .hl-y::after { content:''; position:absolute; left:0; right:0; bottom:2px; height:10px; background:var(--accent-2); z-index:-1; border-radius:4px; transform:rotate(-1deg); }
  .mk-head p { color:var(--ink-soft); font-weight:600; margin-top:1rem; font-size:1.05rem; }

  .mk-wrap { display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:2.5rem; max-width:1080px; margin:0 auto; align-items:start; }
  @media (max-width:880px){ .mk-wrap{ grid-template-columns:1fr; gap:2rem; } }

  /* Controls panel */
  .mk-controls { background:var(--bg-card); border:2px solid var(--line); border-radius:22px; padding:1.8rem; box-shadow:0 10px 30px -20px rgba(0,0,0,.25); }
  .mk-field { margin-bottom:1.3rem; }
  .mk-field:last-of-type { margin-bottom:1.5rem; }
  .mk-field > label { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:.55rem; }
  .mk-hint { font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink-faint); font-size:.78rem; }
  .mk-field input { width:100%; background:var(--bg); border:2px solid var(--line); border-radius:12px; padding:.8rem 1rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; font-weight:600; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
  .mk-field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,107,74,.12); }
  .mk-field input::placeholder { color:var(--ink-faint); font-weight:500; }

  .mk-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
  .mk-chip { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.85rem; padding:.5rem .85rem; border:2px solid var(--line); background:var(--bg); color:var(--ink-soft); border-radius:100px; cursor:pointer; transition:all .18s; }
  .mk-chip:hover { border-color:var(--accent); color:var(--ink); }
  .mk-chip.is-on { background:var(--ink); color:#fff; border-color:var(--ink); }

  .mk-swatches { display:flex; flex-wrap:wrap; gap:.55rem; }
  .mk-sw { width:34px; height:34px; border-radius:50%; background:var(--sw); border:3px solid var(--bg-card); box-shadow:0 0 0 2px var(--line); cursor:pointer; transition:transform .16s, box-shadow .16s; }
  .mk-sw:hover { transform:scale(1.1); }
  .mk-sw.is-on { box-shadow:0 0 0 3px var(--sw); transform:scale(1.12); }

  .mk-shuffle { width:100%; font-family:'Nunito',sans-serif; font-weight:800; font-size:.95rem; padding:.8rem; border:2px dashed var(--line); background:var(--bg); color:var(--ink); border-radius:12px; cursor:pointer; transition:all .18s; }
  .mk-shuffle:hover { border-color:var(--accent); background:#fff6f2; }

  /* Stage + device */
  .mk-stage { display:flex; flex-direction:column; gap:1.4rem; }
  .mk-device { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.35); position:relative; }
  .mk-browserbar { display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; background:#f0ece5; border-bottom:1px solid var(--line); }
  .mk-dot { width:10px; height:10px; border-radius:50%; background:#cfc7bc; }
  .mk-dot:nth-child(1){ background:#ff6b5b; } .mk-dot:nth-child(2){ background:#ffce4a; } .mk-dot:nth-child(3){ background:#4ac96a; }
  .mk-url { margin-left:.6rem; flex:1; background:#fff; border-radius:100px; padding:.28rem .8rem; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .mk-screen { min-height:440px; position:relative; overflow:hidden; transition:opacity .25s; }

  /* scanline sweep when regenerating */
  .mk-scanline { position:absolute; left:0; right:0; top:0; height:100%; pointer-events:none; opacity:0; z-index:6;
    background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.0) 44%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 56%, transparent 100%); }
  .mk-screen.building + .mk-scanline { opacity:1; animation:mkSweep .6s ease; }
  @keyframes mkSweep { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }

  .mk-cta { text-align:center; background:var(--bg-card); border:2px solid var(--line); border-radius:18px; padding:1.5rem; }
  .mk-cta p { color:var(--ink-soft); font-weight:600; margin-bottom:1rem; font-size:.98rem; }
  .mk-btn { display:inline-flex; }

  /* ---- Generated mini-site styles (scoped under .mk-screen) ---- */
  .mk-site { --mkc:#ff6b4a; --mkc2:#ff8b6f; font-family:'Plus Jakarta Sans',sans-serif; color:#1a1a1a; height:100%; display:flex; flex-direction:column; }
  .mk-nav { display:flex; align-items:center; justify-content:space-between; padding:.8rem 1.1rem; border-bottom:1px solid #eee; }
  .mk-logo { font-weight:800; font-size:.95rem; display:flex; align-items:center; gap:.4rem; }
  .mk-logo .mk-badge { width:22px; height:22px; border-radius:6px; background:var(--mkc); color:#fff; display:grid; place-items:center; font-size:.75rem; }
  .mk-navlinks { display:flex; gap:.9rem; font-size:.72rem; color:#888; font-weight:600; }
  .mk-hero { padding:2rem 1.3rem; position:relative; overflow:hidden; }
  .mk-hero .mk-eye { font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mkc); margin-bottom:.5rem; }
  .mk-hero h3 { font-size:1.55rem; line-height:1.1; font-weight:800; letter-spacing:-.02em; margin-bottom:.5rem; }
  .mk-hero h3 .mk-accent { color:var(--mkc); }
  .mk-hero p { font-size:.82rem; color:#666; font-weight:500; max-width:90%; margin-bottom:1rem; }
  .mk-hbtns { display:flex; gap:.5rem; }
  .mk-b1 { background:var(--mkc); color:#fff; font-weight:700; font-size:.75rem; padding:.5rem .9rem; border-radius:100px; }
  .mk-b2 { background:#f2f2f2; color:#333; font-weight:700; font-size:.75rem; padding:.5rem .9rem; border-radius:100px; }
  .mk-strip { display:flex; gap:1rem; padding:.7rem 1.3rem; background:#fafafa; border-block:1px solid #eee; font-size:.68rem; font-weight:700; color:#555; flex-wrap:wrap; }
  .mk-strip span { display:flex; align-items:center; gap:.3rem; }
  .mk-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; padding:1.1rem 1.3rem; }
  .mk-card { background:#fff; border:1px solid #eee; border-radius:10px; padding:.7rem; }
  .mk-card .mk-ic { width:26px; height:26px; border-radius:7px; background:var(--mkc); opacity:.14; margin-bottom:.4rem; }
  .mk-card h4 { font-size:.72rem; font-weight:800; margin-bottom:.2rem; }
  .mk-card p { font-size:.6rem; color:#999; font-weight:500; line-height:1.3; }
  .mk-foot { margin-top:auto; padding:.8rem 1.3rem; background:var(--mkc); color:#fff; font-size:.68rem; font-weight:700; display:flex; justify-content:space-between; align-items:center; }

  /* style variants */
  .mk-site.st-clean .mk-hero h3 { font-weight:700; }
  .mk-site.st-clean .mk-b1, .mk-site.st-clean .mk-card, .mk-site.st-clean .mk-badge { border-radius:6px; }
  .mk-site.st-clean .mk-b1 { border-radius:8px; }
  .mk-site.st-classic { font-family:Georgia, 'Times New Roman', serif; }
  .mk-site.st-classic h3 { font-weight:700; }
  .mk-site.st-classic .mk-b1, .mk-site.st-classic .mk-b2, .mk-site.st-classic .mk-logo .mk-badge { border-radius:3px; }
  .mk-site.st-classic .mk-card { border-radius:4px; }
  .mk-site.st-bold .mk-hero h3 { font-size:1.7rem; font-weight:800; }
  .mk-site.st-bold .mk-hero { background:linear-gradient(135deg, color-mix(in srgb, var(--mkc) 12%, #fff), #fff); }

  @media (max-width:520px){ .mk-cards{ grid-template-columns:1fr; } .mk-hero h3{ font-size:1.35rem; } }

  @keyframes wavearm { 0%,50%,100%{transform:rotate(0)} 60%{transform:rotate(-28deg)} 72%{transform:rotate(10deg)} 84%{transform:rotate(-20deg)} }
  @keyframes hammer { 0%,100%{transform:rotate(-6deg)} 45%{transform:rotate(-46deg)} 60%{transform:rotate(6deg)} }
  @keyframes thumbpop { 0%,40%,100%{transform:rotate(0) translateY(0)} 55%{transform:rotate(-8deg) translateY(-6px)} 70%{transform:rotate(-8deg) translateY(-6px)} }
  @keyframes legbounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
  @keyframes walkin { 0%{opacity:0; transform:translateX(-60px) rotate(-8deg)} 60%{opacity:1} 100%{opacity:1; transform:translateX(0) rotate(0)} }
  @keyframes pop { to{opacity:1; transform:none} }

  @keyframes wavearm { 0%,55%,100%{transform:rotate(0)} 65%{transform:rotate(-22deg)} 75%{transform:rotate(8deg)} 85%{transform:rotate(-16deg)} }
  @keyframes blink { 0%,94%,100%{transform:scaleY(1)} 97%{transform:scaleY(.1)} }

  @keyframes wave { 0%,60%,100%{transform:rotate(0)} 10%,30%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 40%{transform:rotate(10deg)} }
  @keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(24px)} }
  @keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-24px)} }

  /* ============ PREMIUM MOTION LAYER ============ */
  /* scroll progress bar */
  .scroll-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none;
    background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform-origin:0 50%; transform:scaleX(0); }

  /* --- hero entrance choreography (gated on .js; no-JS visitors see everything instantly) --- */
  .js .hero-eyebrow, .js .hero-copy p, .js .hero-actions .btn, .js .hero-strip span, .js .hero-mascot { opacity:0; }
  .hero h1 .w { display:inline-block; opacity:0; transform:translateY(.55em) rotate(3deg); }
  .js .hero h1 .hi::after { transform:scaleX(0) rotate(-1deg); transform-origin:left center; }
  .loaded .hero-mascot { animation:mascotIn .85s cubic-bezier(.3,1.45,.45,1) .05s forwards; transform-origin:50% 95%; }
  .loaded .hero-eyebrow { animation:riseIn .6s cubic-bezier(.22,1,.36,1) .15s forwards; }
  .loaded .hero h1 .w { animation:wordIn .65s cubic-bezier(.26,1.35,.42,1) forwards; animation-delay:var(--d,0s); }
  .loaded .hero h1 .hi::after { animation:underlineDraw .45s cubic-bezier(.22,1,.36,1) .85s forwards; }
  .loaded .hero-copy p { animation:riseIn .6s cubic-bezier(.22,1,.36,1) .72s forwards; }
  .loaded .hero-actions .btn:nth-child(1) { animation:popIn .55s cubic-bezier(.3,1.5,.5,1) .85s forwards; }
  .loaded .hero-actions .btn:nth-child(2) { animation:popIn .55s cubic-bezier(.3,1.5,.5,1) .93s forwards; }
  .loaded .hero-strip span:nth-child(1) { animation:riseIn .5s ease-out 1.02s forwards; }
  .loaded .hero-strip span:nth-child(2) { animation:riseIn .5s ease-out 1.1s forwards; }
  .loaded .hero-strip span:nth-child(3) { animation:riseIn .5s ease-out 1.18s forwards; }
  @keyframes riseIn { from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
  @keyframes wordIn { from{opacity:0; transform:translateY(.55em) rotate(3deg)} to{opacity:1; transform:none} }
  @keyframes popIn { from{opacity:0; transform:translateY(14px) scale(.9)} to{opacity:1; transform:none} }
  @keyframes mascotIn { 0%{opacity:0; transform:scale(.2) rotate(-12deg)} 60%{opacity:1} 100%{opacity:1; transform:scale(1) rotate(0)} }
  .loaded .hero-mascot.settled { animation:none; opacity:1; }
  @keyframes underlineDraw { to{transform:scaleX(1) rotate(-1deg)} }

  /* --- clickable mascot: jump + confetti bits --- */
  .hero-mascot { position:relative; cursor:pointer; }
  .hero-mascot.party { animation:partyJump .55s cubic-bezier(.3,1.6,.4,1) !important; }
  @keyframes partyJump { 0%{transform:none} 30%{transform:translateY(-16px) rotate(-5deg) scale(1.05)} 60%{transform:translateY(0) scale(.96,1.04)} 80%{transform:scale(1.03,.97)} 100%{transform:none} }
  .party-bit { position:absolute; left:50%; top:30%; font-size:1.15rem; pointer-events:none; z-index:5; animation:bitFloat .9s ease-out forwards; }
  @keyframes bitFloat { from{opacity:1; transform:translate(0,0) scale(.5)} to{opacity:0; transform:translate(var(--fx,0),var(--fy,-70px)) scale(1.25) rotate(var(--fr,0deg))} }

  /* --- section headline word cascade --- */
  .h2c .w { display:inline-block; opacity:0; transform:translateY(.45em) rotate(2deg); }
  .h2c.w-in .w { animation:wordIn .6s cubic-bezier(.26,1.3,.42,1) forwards; animation-delay:var(--d,0s); }

  /* --- services ticker --- */
  .ticker { overflow:hidden; border-block:2px solid var(--line); background:var(--bg-card); padding:.7rem 0; transform:rotate(-1deg) scale(1.02); position:relative; z-index:3; }
  .ticker-track { display:flex; width:max-content; animation:tick 30s linear infinite; will-change:transform; }
  .ticker .half { display:flex; align-items:center; gap:1.7rem; padding-right:1.7rem; }
  .ticker .half b { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.2rem; color:var(--ink); white-space:nowrap; }
  .ticker .half b.o { color:transparent; -webkit-text-stroke:1.4px var(--accent); }
  .ticker .half i { font-style:normal; color:var(--accent-2); -webkit-text-stroke:1px var(--accent-deep); font-size:1rem; }
  .ticker:hover .ticker-track { animation-play-state:paused; }
  @keyframes tick { to{transform:translateX(-50%)} }

  /* --- buttons: shine sweep + arrow nudge --- */
  .btn-primary { position:relative; overflow:hidden; }
  .btn-primary::before { content:''; position:absolute; top:0; bottom:0; left:-70%; width:45%; pointer-events:none;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg); transition:left .55s ease; }
  .btn-primary:hover::before { left:130%; }
  .btn .arr { display:inline-block; transition:transform .25s cubic-bezier(.3,1.5,.5,1); }
  .btn:hover .arr { transform:translateX(5px); }

  /* --- service cards: 3D tilt + icon pop --- */
  .service { transform:perspective(700px) translateY(var(--ty,0)) rotateX(var(--rx,0deg)) rotateY(var(--ryy,0deg)); transition:transform .18s ease-out, box-shadow .25s, border-color .25s; will-change:transform; }
  .service:hover { transform:perspective(700px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ryy,0deg)); }
  .service:hover .ic { animation:icPop .5s cubic-bezier(.3,1.6,.4,1); }
  @keyframes icPop { 0%{transform:rotate(-3deg) scale(1)} 40%{transform:rotate(6deg) scale(1.15)} 100%{transform:rotate(-3deg) scale(1)} }

  /* --- process steps + work card life --- */
  .step { transition:transform .25s, box-shadow .25s; }
  .step:hover { transform:translateY(-5px); }
  #process .step:hover .n { animation:icPop .5s cubic-bezier(.3,1.6,.4,1); }
  .work-visual { overflow:hidden; }
  .work-visual .shot { transition:transform .6s cubic-bezier(.22,1,.36,1); }
  .work-card:hover .shot { transform:scale(1.045); }

  /* --- nav logo wiggle --- */
  .logo:hover .mark { animation:markWiggle .6s cubic-bezier(.3,1.5,.5,1); }
  @keyframes markWiggle { 0%{transform:rotate(-4deg)} 35%{transform:rotate(9deg) scale(1.08)} 70%{transform:rotate(-9deg)} 100%{transform:rotate(-4deg)} }

  /* --- process wave dividers --- */
  #process .wave { position:absolute; left:0; right:0; height:46px; z-index:1; pointer-events:none; }
  #process .wave svg { display:block; width:100%; height:100%; }
  #process .wave.top { top:-1px; }
  #process .wave.bot { bottom:-1px; transform:scaleY(-1); }

  /* --- CTA band: drifting warm glow --- */
  .cta-band { position:relative; overflow:hidden; }
  .cta-band::before { content:''; position:absolute; width:55%; aspect-ratio:1; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(255,210,63,.16), transparent 62%); top:-25%; left:-12%; animation:glowDrift 9s ease-in-out infinite alternate; }
  .cta-band > div { position:relative; z-index:1; }
  @keyframes glowDrift { from{transform:translate(0,0) scale(1)} to{transform:translate(70%,30%) scale(1.25)} }

  /* --- mockup: staged rebuild + chip pop --- */
  .mk-site > * { animation:mkIn .5s cubic-bezier(.22,1,.36,1) both; }
  .mk-site > *:nth-child(2) { animation-delay:.07s } .mk-site > *:nth-child(3) { animation-delay:.14s }
  .mk-site > *:nth-child(4) { animation-delay:.21s } .mk-site > *:nth-child(5) { animation-delay:.28s }
  @keyframes mkIn { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
  .mk-chip.is-on { animation:chipPop .32s cubic-bezier(.3,1.6,.4,1); }
  @keyframes chipPop { 0%{transform:scale(.92)} 60%{transform:scale(1.07)} 100%{transform:scale(1)} }

  /* --- reduced motion: everything simply visible, nothing moves --- */
  @media (prefers-reduced-motion: reduce){
    .js .hero-eyebrow, .js .hero-copy p, .js .hero-actions .btn, .js .hero-strip span, .js .hero-mascot,
    .hero h1 .w, .h2c .w { opacity:1 !important; transform:none !important; animation:none !important; }
    .js .hero h1 .hi::after { transform:scaleX(1) rotate(-1deg) !important; }
    .ticker-track { animation:none !important; }
    .scroll-progress { display:none; }
  }

  /* ============ PREMIUM RESTYLE (overrides the playful layer) ============ */
  /* nav + wordmark */
  nav { background: rgba(247,245,241,.85); }
  nav.scrolled { border-color: var(--line); border-bottom-width:1px; }
  .logo { font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.3rem; letter-spacing:-.01em; gap:.6rem; }
  .logo .mark { background:var(--ink); color:#f7f5f1; border-radius:50%; transform:none; font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.05rem; }
  .logo:hover .mark { animation:none; background:var(--accent); transition:background .3s; }
  .nav-links a { font-weight:600; font-size:.9rem; }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta { background:var(--ink); padding:.55rem 1.25rem; }
  .nav-cta:hover { background:var(--accent) !important; }

  /* hero: centred, serif, calm */
  .hero-inner { justify-content:center; }
  .hero-copy { text-align:center; max-width:800px; }
  .hero-actions, .hero-strip { justify-content:center; }
  .hero-eyebrow { background:transparent; border:1px solid var(--line); color:var(--ink-soft); font-weight:600; font-size:.68rem; letter-spacing:.24em; }
  .hero-eyebrow .dot { background:var(--accent); }
  .hero h1 { font-family:'Fraunces', Georgia, serif; font-weight:560; letter-spacing:-.015em; line-height:1.08; font-size:clamp(2.6rem, 5.4vw, 4.4rem); }
  .hero h1 .hi { font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500; color:var(--accent); }
  .hero h1 .hi::after { display:none; }
  .hero p { font-weight:500; color:var(--ink-soft); max-width:560px; margin-left:auto; margin-right:auto; }
  .hero-strip { gap:1.3rem; margin-top:2.4rem; }
  .hero-strip span { text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; font-weight:600; color:var(--ink-faint); }
  .hero-strip span:not(:first-child)::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--accent-2); margin-right:1.3rem; display:inline-block; }

  /* buttons: flat, refined */
  .btn { font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.95rem; letter-spacing:.01em; padding:.95rem 1.8rem; }
  .btn-primary { background:var(--ink); color:#f7f5f1; box-shadow:0 12px 28px -16px rgba(23,19,16,.45); }
  .btn-primary::before { display:none; }
  .btn-primary:hover { transform:translateY(-2px); background:#241d16; box-shadow:0 18px 34px -18px rgba(23,19,16,.5); }
  .btn-primary:active { transform:translateY(0); box-shadow:0 8px 20px -14px rgba(23,19,16,.4); }
  .btn-ghost { background:transparent; border:1px solid var(--line); color:var(--ink); }
  .btn-ghost:hover { transform:translateY(-2px); border-color:var(--ink); }

  /* ticker: quiet editorial strip */
  .ticker { transform:none; border-block:1px solid var(--line); background:transparent; padding:.95rem 0; }
  .ticker-track { animation-duration:46s; }
  .ticker .half { gap:2.2rem; padding-right:2.2rem; }
  .ticker .half b { font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); -webkit-text-stroke:0; }
  .ticker .half b.o { color:var(--ink-faint); -webkit-text-stroke:0; }
  .ticker .half i { color:var(--accent-2); -webkit-text-stroke:0; font-size:.5rem; }

  /* cards: hairlines, soft depth, no cartoon tilt */
  .service { border-width:1px; border-radius:16px; transform:none; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; }
  .service:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#d8d0c2; }
  .service .ic { width:auto; height:auto; background:none; transform:none; border-radius:0; font-family:'Fraunces', Georgia, serif; font-size:1.05rem; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
  .service .ic::after { content:''; height:1px; width:38px; background:var(--line); }
  .service:hover .ic { animation:none; }
  .service h3 { font-size:1.35rem; }
  .service p { font-weight:500; }
  .service .price { font-weight:600; color:var(--accent); font-size:.9rem; letter-spacing:.02em; }

  /* process: refined dark chapter */
  #process { background:#14110d;
    background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:56px 56px; }
  #process .eyebrow { color:var(--accent-2); }
  #process .step { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:14px; }
  #process .step .n { background:none; border:1px solid var(--accent-2); color:var(--accent-2); box-shadow:none; font-family:'Fraunces', Georgia, serif; font-weight:600; }
  #process .step:hover .n { animation:none; }
  #process .step p { font-weight:500; }

  /* work: gallery calm */
  .work-card { border-width:1px; border-radius:18px; }
  .work-card:hover { border-color:#d8d0c2; }
  .work-visual .tape { transform:none; left:0; top:0; padding:.5rem 1.1rem; font-size:.62rem; font-weight:600; letter-spacing:.24em; border-radius:0 0 10px 0; }
  .work-info h3 { font-size:1.6rem; }
  .work-info p { font-weight:500; }
  .tag { border-width:1px; background:transparent; font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding:.35rem .8rem; }

  /* cta band: velvet */
  .cta-band { background:#14110d; border-radius:24px; }
  .cta-band::before { background:radial-gradient(circle, rgba(201,160,97,.12), transparent 62%); }
  .cta-band p { color:#b5aca0; font-weight:500; }

  /* mockup: gallery plinth */
  .mk-head .eyebrow { background:transparent; border:1px solid var(--line); color:var(--accent); padding:.45rem 1.1rem; }
  .mk-head h2 .hl-y { color:var(--accent); font-style:italic; }
  .mk-head h2 .hl-y::after { display:none; }
  .mk-head p, .mk-cta p { font-weight:500; }
  .mk-controls { border-width:1px; border-radius:18px; }
  .mk-field > label { font-weight:600; letter-spacing:.14em; font-size:.68rem; color:var(--ink-soft); }
  .mk-field input { border-width:1px; font-weight:500; }
  .mk-field input:focus { box-shadow:0 0 0 3px rgba(161,116,63,.14); }
  .mk-chip { border-width:1px; font-weight:600; font-size:.82rem; }
  .mk-chip.is-on { animation:none; }
  .mk-sw { box-shadow:0 0 0 1px var(--line); }
  .mk-shuffle { border:1px dashed var(--line); font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; }
  .mk-shuffle:hover { background:#f3efe8; }
  .mk-cta { border-width:1px; border-radius:16px; }
  .mk-device { border-radius:14px; box-shadow:0 40px 80px -44px rgba(23,19,16,.45); }

  /* about + faq + contact */
  .about-photo img { border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow); }
  .about-text p { font-weight:500; }
  .about-text .sig { font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500; color:var(--accent); }
  .qa { border-bottom-width:1px; }
  .qa button { font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.15rem; }
  .qa .ans { font-weight:500; }
  .field label { font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
  .field input, .field textarea { border-width:1px; border-radius:12px; font-weight:500; }
  .c-side .ci .k { font-weight:600; letter-spacing:.16em; }
  .c-side .ci .v { font-weight:600; }
  .c-side .ci .v a { color:var(--accent); }
  .form-note { font-weight:500; }
  footer { border-top-width:1px; }
  footer .fnote, footer .fr a { font-weight:500; }

  /* invert the primary button on dark bands */
  .cta-band .btn-primary { background:#f7f5f1; color:var(--ink); box-shadow:0 14px 30px -16px rgba(0,0,0,.55); }
  .cta-band .btn-primary:hover { background:#fff; transform:translateY(-2px); }

  /* quiet the machinery */
  .scroll-progress { background:var(--accent); height:2px; }
  .tnote { display:none; }

  /* ============ WORLD-CLASS LAYER ============ */
  /* film grain, editorial tactility */
  body::after { content:''; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; }

  /* ambient light behind the hero */
  .aurora { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; }
  .aurora.a1 { width:52vw; height:52vw; max-width:760px; max-height:760px; top:-18%; right:-12%;
    background:radial-gradient(circle, rgba(201,160,97,.30), transparent 65%); animation:auroraDrift 18s ease-in-out infinite alternate; }
  .aurora.a2 { width:42vw; height:42vw; max-width:620px; max-height:620px; bottom:-14%; left:-10%;
    background:radial-gradient(circle, rgba(161,116,63,.18), transparent 65%); animation:auroraDrift 22s ease-in-out infinite alternate-reverse; }
  @keyframes auroraDrift { from{transform:translate(0,0) scale(1)} to{transform:translate(-6%,9%) scale(1.14)} }

  /* stats band */
  .stats { padding:clamp(2.5rem,5vw,4rem) clamp(1.2rem,5vw,4rem); }
  .stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2.2rem; max-width:1080px; margin:0 auto; }
  .stat { border-left:1px solid var(--line); padding-left:1.5rem; }
  .stat .n { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(2.3rem,4.6vw,3.4rem); line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums; }
  .stat .l { margin-top:.55rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; line-height:1.8; }

  /* flagship service card */
  .service.featured { background:#171310; border-color:#171310; }
  .service.featured h3 { color:#f7f5f1; }
  .service.featured p { color:#b5aca0; }
  .service.featured .ic { color:var(--accent-2); }
  .service.featured .ic::after { background:rgba(255,255,255,.16); }
  .service.featured .price { color:var(--accent-2); }
  .service.featured:hover { border-color:#171310; }

  /* case-study image: curtain reveal on scroll */
  .work-card .shot { clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.22,1,.36,1) .15s, transform .6s cubic-bezier(.22,1,.36,1); }
  .work-card.in .shot { clip-path:inset(0 0 0% 0); }

  /* mockup device presented in perspective, straightens on hover */
  .mk-stage { perspective:1600px; }
  .mk-device { transform:rotateX(3deg) rotateY(-5deg); transition:transform .7s cubic-bezier(.22,1,.36,1), box-shadow .7s; }
  .mk-stage:hover .mk-device { transform:rotateX(0) rotateY(0); }
  @media (max-width:880px){ .mk-device { transform:none; } }

  /* nav: shrinks on scroll, links get drawn underlines */
  nav { transition:padding .35s ease, border-color .3s; }
  nav.scrolled { padding-top:.55rem; padding-bottom:.55rem; }
  .nav-links a:not(.nav-cta) { position:relative; }
  .nav-links a:not(.nav-cta)::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .3s cubic-bezier(.22,1,.36,1); }
  .nav-links a:not(.nav-cta):hover::after { transform:scaleX(1); transform-origin:left; }

  /* magnetic primary buttons */
  .btn-primary { transition:translate .3s cubic-bezier(.22,1,.36,1), transform .25s, background .25s, box-shadow .25s; }

  /* editorial mega footer */
  footer.mega { display:block; padding:0; margin-top:5rem; border-top:1px solid var(--line); overflow:hidden; }
  .foot-cta { text-align:center; padding:clamp(4rem,9vw,7rem) 1.5rem clamp(2.6rem,5vw,4rem); }
  .foot-cta .eyebrow { display:block; margin-bottom:1.1rem; }
  .foot-cta h2 { font-size:clamp(2.6rem,7vw,5rem); letter-spacing:-.02em; }
  .foot-mail { display:inline-block; margin-top:1.5rem; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(1.2rem,2.4vw,1.65rem); color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(161,116,63,.5); padding-bottom:2px; transition:color .25s, border-color .25s; }
  .foot-mail:hover { color:var(--accent-deep); border-color:var(--accent-deep); }
  .foot-grid { display:flex; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; padding:0 clamp(1.2rem,5vw,4rem) 2.5rem; max-width:1100px; margin:0 auto; }
  .foot-col .k { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:.9rem; }
  .foot-col a, .foot-col span { display:block; color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:.95rem; padding:.26rem 0; }
  .foot-col a:hover { color:var(--accent); }
  .foot-mark { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(4rem,15vw,11rem); line-height:.95; text-align:center; color:var(--ink); opacity:.05; user-select:none; pointer-events:none; letter-spacing:-.02em; }
  .foot-base { border-top:1px solid var(--line); padding:1.4rem clamp(1.2rem,5vw,4rem); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; color:var(--ink-faint); font-size:.85rem; font-weight:500; }

  @media (prefers-reduced-motion: reduce){
    .aurora { animation:none !important; }
    .work-card .shot { clip-path:none !important; }
    .mk-device { transform:none !important; }
    body::after { display:none; }
  }

  /* ============ LUXURY TRADE LAYER ============ */
  /* --- preloader: monogram, hairline fill, curtain lift --- */
  #loader { display:none; }
  .js #loader { display:flex; position:fixed; inset:0; z-index:400; background:var(--bg); align-items:center; justify-content:center;
    transition:transform .9s cubic-bezier(.76,0,.24,1), visibility 0s .9s; }
  #loader.done { transform:translateY(-100%); visibility:hidden; }
  .loader-inner { text-align:center; }
  .loader-mark { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:3.4rem; color:var(--ink); opacity:0; animation:loaderFade .7s ease .1s forwards; }
  .loader-line { width:120px; height:1px; background:var(--line); margin:1.1rem auto; overflow:hidden; }
  .loader-line i { display:block; height:100%; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; animation:loaderFill 1s cubic-bezier(.76,0,.24,1) .25s forwards; }
  .loader-word { font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; opacity:0; animation:loaderFade .7s ease .35s forwards; }
  @keyframes loaderFade { to{opacity:1} }
  @keyframes loaderFill { to{transform:scaleX(1)} }
  @media (prefers-reduced-motion: reduce){ .js #loader { display:none; } }

  /* --- custom cursor (desktop only, JS-armed) --- */
  .cursor-dot, .cursor-ring { display:none; }
  .cursor-on .cursor-dot { display:block; position:fixed; z-index:500; width:5px; height:5px; border-radius:50%; background:var(--accent); pointer-events:none; translate:-50% -50%; }
  .cursor-on .cursor-ring { display:block; position:fixed; z-index:499; width:30px; height:30px; border-radius:50%; border:1px solid rgba(161,116,63,.55); pointer-events:none; translate:-50% -50%; transition:width .25s ease, height .25s ease, border-color .25s, background-color .25s; }
  .cursor-on .cursor-ring.big { width:52px; height:52px; border-color:rgba(161,116,63,.85); background:rgba(201,160,97,.08); }
  .cursor-on, .cursor-on a, .cursor-on button, .cursor-on .btn, .cursor-on .mk-chip, .cursor-on .mk-sw, .cursor-on .qa button { cursor:none; }
  .cursor-on input, .cursor-on textarea { cursor:auto; }

  /* --- the sheet: everything after the hero slides over it --- */
  .hero { position:sticky; top:0; z-index:0; min-height:100svh; }
  .page-over { position:relative; z-index:2; background:var(--bg); border-radius:30px 30px 0 0; box-shadow:0 -30px 60px -40px rgba(23,19,16,.25); }
  .ticker { border-top:none; border-radius:30px 30px 0 0; }

  /* --- scroll cue --- */
  .scroll-cue { position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); text-align:center; z-index:2; }
  .scroll-cue span { display:block; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:.7rem; }
  .scroll-cue i { display:block; width:1px; height:44px; margin:0 auto; background:var(--line); position:relative; overflow:hidden; }
  .scroll-cue i::after { content:''; position:absolute; left:0; top:-40%; width:100%; height:40%; background:var(--accent); animation:cueDrop 2.2s cubic-bezier(.76,0,.24,1) infinite; }
  @keyframes cueDrop { 0%{top:-40%} 55%,100%{top:110%} }
  .js .scroll-cue { opacity:0; }
  .loaded .scroll-cue { animation:riseIn .8s ease 1.6s forwards; }

  /* --- manifesto: the statement --- */
  .manifesto { padding:clamp(4rem,9vw,7rem) clamp(1.2rem,5vw,4rem); text-align:center; }
  .mani-inner { max-width:900px; margin:0 auto; }
  .mani-line { font-family:'Fraunces',Georgia,serif; font-weight:560; font-size:clamp(1.9rem,4.6vw,3.6rem); line-height:1.22; letter-spacing:-.015em; color:var(--ink); }
  .mani-line em { font-style:italic; color:var(--accent); }

  /* --- process: inset blueprint sheet with drafting details --- */
  #process { margin:0 clamp(.8rem,2.5vw,2.2rem); border-radius:28px; overflow:hidden; }
  .title-block { position:absolute; right:clamp(1rem,3vw,2.4rem); bottom:1.2rem; z-index:2; display:flex; border:1px solid rgba(255,255,255,.14); }
  .title-block span { padding:.45rem .8rem; font-size:.56rem; letter-spacing:.18em; color:rgba(255,255,255,.45); font-weight:600; border-right:1px solid rgba(255,255,255,.14); white-space:nowrap; }
  .title-block span:last-child { border-right:none; }
  .title-block span:first-child { color:var(--accent-2); }
  @media (max-width:700px){ .title-block { display:none; } }
  #process .process { position:relative; }
  #process .process::before { content:''; position:absolute; top:-1.6rem; left:0; right:0; height:1px; background:rgba(255,255,255,.12); transform:scaleX(0); transform-origin:left; transition:transform 1.4s cubic-bezier(.22,1,.36,1) .2s; }
  #process .process.in::before { transform:scaleX(1); }

  /* --- drawn hairline above every section head --- */
  .sec-head::before, .mk-head::before { content:''; display:block; width:56px; height:1px; background:var(--accent); margin-bottom:1.3rem; transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.22,1,.36,1) .15s; }
  .mk-head::before { margin-left:auto; margin-right:auto; }
  .sec-head.in::before, .reveal.in.sec-head::before, .mk-head.in::before { transform:scaleX(1); }

  /* --- case study: slow ken burns once revealed --- */
  .work-card.in .shot { animation:kenburns 18s ease-in-out infinite alternate; }
  @keyframes kenburns { from{transform:scale(1) translate(0,0)} to{transform:scale(1.07) translate(-1.5%,1.5%)} }

  @media (prefers-reduced-motion: reduce){
    .scroll-cue i::after { animation:none; }
    .js .scroll-cue { opacity:1; }
    .work-card.in .shot { animation:none; }
    #process .process::before, .sec-head::before, .mk-head::before { transform:scaleX(1) !important; }
    .hero { position:relative; min-height:100vh; }
  }

  /* ============ HOUSE DETAILS ============ */
  ::selection { background:var(--accent-2); color:var(--ink); }
  :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
  section, .manifesto { scroll-margin-top:84px; }

  /* numbered questions, matching the service numerals */
  .faq { counter-reset:q; }
  .qa button::before { counter-increment:q; content:counter(q,decimal-leading-zero); font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:.85rem; color:var(--accent); margin-right:1.1rem; flex-shrink:0; }

  /* about: a plaster-tone sheet for tonal rhythm */
  #about { background:#efe9df; margin:0 clamp(.8rem,2.5vw,2.2rem); border-radius:28px; }
  #about .about { margin-left:auto; margin-right:auto; }

  /* monogram block in the generated mini-sites */
  .mk-mono { font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:.04em; }

  /* work: two projects, editorial rhythm */
  .work-card + .work-card { margin-top:1.8rem; }
  .work-card.alt .work-visual { order:2; }
  @media (max-width:780px){ .work-card.alt .work-visual { order:0; } }
  .work-link { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem; color:var(--accent); font-weight:600; font-size:.9rem; text-decoration:none; letter-spacing:.02em; }
  .work-link:hover { color:var(--accent-deep); }
  .work-link .arr { display:inline-block; transition:transform .25s cubic-bezier(.3,1.5,.5,1); }
  .work-link:hover .arr { transform:translateX(5px); }

  /* ============ DENSITY PASS: tighter, larger, more confident ============ */
  section { padding: clamp(3rem,6.5vw,5.2rem) clamp(1.2rem,5vw,4rem); }
  .sec-head { margin-bottom: 2.2rem; }
  .sec-head h2 { font-size: clamp(2.2rem,5.2vw,3.6rem); }
  .sec-head p { font-size: 1.12rem; }
  .mk-head { margin-bottom: 2.2rem; }
  .mk-head p { font-size: 1.12rem; }
  .manifesto { padding: clamp(3rem,6vw,4.8rem) clamp(1.2rem,5vw,4rem); }
  .stats { padding: clamp(2rem,4vw,3rem) clamp(1.2rem,5vw,4rem); }
  .ticker { padding: .8rem 0; }
  .service h3 { font-size: 1.45rem; }
  .service p { font-size: 1rem; }
  .step h3 { font-size: 1.28rem; }
  .step p { font-size: .98rem; }
  .work-info h3 { font-size: 1.75rem; }
  .work-info p { font-size: 1.02rem; }
  .about-text p { font-size: 1.12rem; }
  .qa button { font-size: 1.22rem; }
  .qa .ans { font-size: 1.02rem; }
  .hero p { font-size: clamp(1.05rem,1.5vw,1.24rem); }
  .foot-cta { padding: clamp(3rem,6.5vw,5rem) 1.5rem clamp(2.2rem,4.5vw,3.2rem); }
  footer.mega { margin-top: 3rem; }
  .work-card + .work-card { margin-top: 1.5rem; }

  /* ============ HERO SHOWCASE: IN THEIR HANDS ============ */
  @media (min-width:1000px){
    .hero-inner { justify-content:space-between; gap:clamp(2rem,4vw,4rem); max-width:1200px; }
    .hero-copy { text-align:left; max-width:560px; }
    .hero-actions, .hero-strip { justify-content:flex-start; }
    .hero p { margin-left:0; }
    .hero h1 { font-size:clamp(2.4rem,3.9vw,3.9rem); }
  }
  .hero-show { position:relative; flex-shrink:0; width:min(44vw,600px); aspect-ratio:600/520; display:none; }
  @media (min-width:1000px){ .hero-show { display:block; } }
  .hs-frame { position:absolute; right:0; top:6%; width:88%; background:#fff; border:1px solid #e0d9cc; border-radius:12px; overflow:hidden; box-shadow:0 50px 90px -40px rgba(23,19,16,.4); }
  .hs-bar { display:flex; align-items:center; gap:6px; padding:9px 13px; background:#f0ece5; border-bottom:1px solid var(--line); }
  .hs-d { width:8px; height:8px; border-radius:50%; }
  .hs-d1{background:#ff6b5b} .hs-d2{background:#ffce4a} .hs-d3{background:#4ac96a}
  .hs-url { margin-left:9px; background:#fff; border-radius:100px; padding:3px 13px; font-size:10.5px; color:var(--ink-faint); font-family:monospace; }
  .hs-frame img { display:block; width:100%; height:auto; }
  .hs-phone { position:absolute; left:0; bottom:2%; width:33%; border-radius:26px; background:#171310; padding:8px; box-shadow:0 40px 80px -30px rgba(23,19,16,.5); z-index:2; transform:rotate(-4deg); animation:phoneFloat 6s ease-in-out infinite alternate; }
  .hs-notch { position:absolute; top:13px; left:50%; translate:-50% 0; width:26%; height:6px; border-radius:100px; background:#171310; z-index:3; }
  .hs-screen { display:block; border-radius:19px; overflow:hidden; }
  .hs-screen img { display:block; width:100%; height:auto; }
  @keyframes phoneFloat { from{transform:rotate(-4deg) translateY(0)} to{transform:rotate(-3.2deg) translateY(-9px)} }
  .hs-plate { position:absolute; z-index:3; background:var(--ink); color:#f7f5f1; font-size:9.5px; letter-spacing:.24em; padding:7px 12px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif; }
  .hs-p1 { right:-8px; top:2%; }
  .hs-p2 { left:-6px; bottom:-3%; background:var(--accent); }
  .js .hero-show { opacity:0; }
  .loaded .hero-show { animation:riseIn 1s cubic-bezier(.22,1,.36,1) .55s forwards; }
  @media (max-height:820px) and (min-width:1000px){
    .hero h1 { font-size:clamp(2.1rem,3.4vw,3.2rem); }
    .hero-show { width:min(40vw,520px); }
    .hero { padding-top:5rem; }
  }
  @media (max-width:999px){
    .hero { position:relative; }
  }
  @media (prefers-reduced-motion: reduce){
    .hs-phone { animation:none; }
    .js .hero-show { opacity:1 !important; }
  }

  /* ============ SHADOW CREW: soft silhouettes at work behind the hero ============ */
  .shadow-crew { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.07; filter:blur(2.5px); }
  .sc { position:absolute; bottom:-6px; }
  .sc g { fill:#171310; stroke:#171310; }
  .sc-brick { left:1.5%; height:300px; transform:skewX(-4deg); }
  .sc-pour { left:33%; height:230px; transform:skewX(-3deg); }
  .sc-hammer { right:2.5%; height:280px; transform:skewX(4deg); }
  .arm-tap { transform-origin:140px 122px; animation:brickTap 4.6s ease-in-out infinite; }
  .arm-strike { transform-origin:114px 102px; animation:hammerStrike 3.1s cubic-bezier(.45,0,.55,1) infinite; }
  .arm-pour { transform-origin:74px 118px; animation:pourTilt 5.5s ease-in-out infinite; }
  .steam { opacity:0; animation:steamPuff 5.5s ease-in-out infinite; }
  @keyframes brickTap { 0%,60%,100%{transform:rotate(0)} 12%,36%{transform:rotate(-11deg)} 24%,48%{transform:rotate(5deg)} }
  @keyframes hammerStrike { 0%,70%,100%{transform:rotate(6deg)} 35%{transform:rotate(-48deg)} 48%{transform:rotate(11deg)} 56%{transform:rotate(2deg)} }
  @keyframes pourTilt { 0%,80%,100%{transform:rotate(0)} 28%,62%{transform:rotate(10deg)} }
  @keyframes steamPuff { 0%,22%,90%,100%{opacity:0; transform:translateY(4px)} 45%,70%{opacity:.9; transform:translateY(-7px)} }
  @media (max-width:999px){
    .sc-pour { display:none; }
    .sc-brick { height:160px; left:0; }
    .sc-hammer { height:150px; right:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .arm-tap, .arm-strike, .arm-pour { animation:none !important; }
    .steam { animation:none !important; opacity:.5; }
  }

  /* ============ NIGHT SHIFT: conversion + access polish ============ */
  .skip-link { position:fixed; top:-60px; left:16px; z-index:600; background:var(--ink); color:#f7f5f1; padding:.7rem 1.2rem; border-radius:0 0 10px 10px; font-weight:600; font-size:.9rem; text-decoration:none; transition:top .25s; }
  .skip-link:focus { top:0; }

  /* sticky mobile action bar */
  .mobile-cta { position:fixed; left:0; right:0; bottom:0; z-index:130; padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px));
    background:rgba(247,245,241,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line);
    transform:translateY(110%); transition:transform .4s cubic-bezier(.22,1,.36,1); display:none; }
  .mobile-cta .btn { width:100%; justify-content:center; }
  .mobile-cta.show { transform:translateY(0); }
  @media (max-width:760px){ .mobile-cta { display:block; } }

  /* section dot navigation (large screens) */
  .dot-nav { position:fixed; left:auto; right:1.4rem; top:calc(50% - 84px); bottom:auto; z-index:115; display:none; flex-direction:column; gap:14px; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; border:none; width:auto; }
  @media (min-width:1200px){ .dot-nav { display:flex; } }
  .dot-nav a { width:7px; height:7px; border-radius:50%; background:var(--ink-faint); opacity:.45; transition:opacity .25s, background .25s, transform .25s; }
  .dot-nav a:hover { opacity:.9; transform:scale(1.35); }
  .dot-nav a.on { background:var(--accent); opacity:1; transform:scale(1.45); }

  /* trust line under the big CTA */
  .trusted { margin-top:1.3rem; font-size:.85rem; color:#b5aca0; font-weight:500; }
  .trusted a { color:var(--accent-2); text-decoration:none; border-bottom:1px solid rgba(201,160,97,.4); }
  .trusted a:hover { border-color:var(--accent-2); }

  /* availability pulse */
  .pulse { display:inline-block; width:8px; height:8px; border-radius:50%; background:#3f9c62; margin-right:.5rem; animation:pulseGlow 2.4s ease-in-out infinite; }
  @keyframes pulseGlow { 0%,100%{box-shadow:0 0 0 0 rgba(63,156,98,.4)} 50%{box-shadow:0 0 0 6px rgba(63,156,98,0)} }

  /* faq tail */
  .faq-more { margin-top:1.6rem; font-weight:500; color:var(--ink-soft); font-size:1.02rem; }
  .faq-more a { color:var(--accent); font-weight:600; }

  /* contrast: small caps labels step up from faint to soft */
  .stat .l, .hero-strip span { color:var(--ink-soft); }

  @media (prefers-reduced-motion: reduce){
    .pulse { animation:none; }
    .mobile-cta { transition:none; }
  }

  /* ============ FIX: the showcase shows at every width ============ */
  .hero-show { display:block; width:min(86vw,520px); margin:2.6rem auto 0; }
  @media (min-width:1000px){ .hero-show { width:min(44vw,600px); margin:0; } }
  @media (max-width:999px){ .hero-inner { flex-direction:column; } .hero-copy { text-align:center; } }

  /* share-a-mockup link */
  .mk-share { display:block; margin:1rem auto 0; background:none; border:none; cursor:pointer;
    color:var(--accent); font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.88rem;
    border-bottom:1px solid rgba(161,116,63,.4); padding:0 0 2px; }
  .mk-share:hover { color:var(--accent-deep); border-color:var(--accent-deep); }

  /* ============ SERVICE DETAIL SHEETS ============ */
  .service { position:relative; cursor:pointer; }
  .service::after { content:'+'; position:absolute; top:1.5rem; right:1.5rem; width:26px; height:26px;
    border:1px solid var(--line); border-radius:50%; display:grid; place-items:center;
    color:var(--accent); font-family:'Fraunces',Georgia,serif; font-size:1.05rem; line-height:1;
    transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .25s, color .25s; }
  .service:hover::after { transform:rotate(90deg); border-color:var(--accent); }
  .service.featured::after { border-color:rgba(255,255,255,.22); color:var(--accent-2); }
  .service:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

  .svc-modal[hidden] { display:none !important; }
  .svc-modal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
  .svc-backdrop { position:absolute; inset:0; background:rgba(23,19,16,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    opacity:0; transition:opacity .35s ease; }
  .svc-modal.open .svc-backdrop { opacity:1; }
  .svc-sheet { position:relative; width:min(92vw,560px); max-height:86svh; overflow-y:auto; background:var(--bg-card);
    border:1px solid var(--line); border-radius:18px; padding:2.4rem 2.4rem 2.2rem; box-shadow:0 60px 120px -40px rgba(23,19,16,.5);
    opacity:0; transform:translateY(26px) scale(.98); transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1); }
  .svc-modal.open .svc-sheet { opacity:1; transform:none; }
  .svc-close { position:absolute; top:1.1rem; right:1.1rem; width:34px; height:34px; border-radius:50%;
    border:1px solid var(--line); background:none; color:var(--ink-soft); font-size:1.15rem; line-height:1; cursor:pointer;
    transition:border-color .25s, color .25s, transform .3s; }
  .svc-close:hover { border-color:var(--accent); color:var(--accent); transform:rotate(90deg); }
  .svc-sheet .eyebrow { display:block; margin-bottom:.7rem; }
  .svc-sheet h3 { font-size:1.7rem; margin-bottom:.7rem; }
  .svc-lead { color:var(--ink-soft); font-weight:500; margin-bottom:1.4rem; line-height:1.6; }
  .svc-list { list-style:none; margin:0 0 1.6rem; padding:0; }
  .svc-list li { display:flex; gap:.85rem; padding:.5rem 0; color:var(--ink); font-weight:500; font-size:.98rem; line-height:1.55; border-bottom:1px solid #f0ebe2; }
  .svc-list li:last-child { border-bottom:none; }
  .svc-list li::before { content:'—'; color:var(--accent); font-family:'Fraunces',Georgia,serif; flex-shrink:0; }
  .svc-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:1.5rem; }
  .svc-price { font-weight:600; color:var(--accent); letter-spacing:.02em; }
  @media (max-width:560px){ .svc-sheet { padding:1.8rem 1.4rem 1.6rem; } .svc-foot .btn { width:100%; justify-content:center; } }
  @media (prefers-reduced-motion: reduce){ .svc-backdrop, .svc-sheet { transition:none; } }

  /* ============ POLISH PACK ============ */
  /* self-drawing monogram in the loader */
  .loader-mark { opacity:1; animation:none; width:56px; height:56px; margin:0 auto; }
  .loader-mark svg { width:100%; height:100%; display:block; }
  .loader-mark path { fill:none; stroke:var(--ink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:100; stroke-dashoffset:100; animation:drawMark 1s cubic-bezier(.76,0,.24,1) .1s forwards; }
  @keyframes drawMark { to{stroke-dashoffset:0} }

  /* one gold shimmer across the headline accent as it lands */
  .loaded .hero h1 .hi {
    background:linear-gradient(100deg, var(--accent) 0%, var(--accent) 42%, #ead4a0 50%, var(--accent) 58%, var(--accent) 100%);
    background-size:300% 100%; background-position:150% 0;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shimmer 1.5s ease 1.25s 1 forwards; }
  @keyframes shimmer { to{background-position:-50% 0} }

  /* dark takeover: the process panel expands to full bleed and the page goes dark around it */
  #process { transition:border-radius .2s linear; will-change:margin; }
  .page-over { transition:background-color .7s ease; }
  .page-over.in-dark { background-color:#14110d; }
  .page-over.in-dark .ticker { opacity:0; }

  @media (prefers-reduced-motion: reduce){
    .loader-mark path { stroke-dashoffset:0; animation:none; }
    .loaded .hero h1 .hi { animation:none; background:none; color:var(--accent); -webkit-background-clip:initial; background-clip:initial; }
    .page-over { transition:none; }
  }

  /* work cards: the screenshot column keeps its own proportions, so the whole site shot is in frame */
  .work-visual { min-height:0; aspect-ratio:960/750; }
  @keyframes kenburns { from{transform:scale(1) translate(0,0)} to{transform:scale(1.035) translate(-0.8%,0.8%)} }

  /* ============ THE WALL BUILDS ITSELF ============ */
  .wall-wrap { display:grid; grid-template-columns:minmax(240px,.85fr) 1.5fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
  @media (max-width:900px){ .wall-wrap { grid-template-columns:1fr; } .wall-col { max-width:420px; margin:0 auto 1rem; } }
  .wall-col svg { width:100%; height:auto; aspect-ratio:410/300; display:block; overflow:visible; }
  .wall .brick { opacity:0; transform:translateY(-10px);
    transition:opacity .3s ease, transform .5s cubic-bezier(.22,1,.36,1); }
  .wall .brick.laid { opacity:1; transform:none; }
  .wall .brick .f { fill:rgba(201,160,97,.12); stroke:rgba(201,160,97,.4); stroke-width:1; }
  .wall .brick .t { fill:rgba(201,160,97,.45); }
  .wall .brick .s { fill:rgba(201,160,97,.04); stroke:rgba(201,160,97,.3); stroke-width:.6; }
  .wall .ground { stroke:rgba(255,255,255,.2); stroke-width:1; }
  .wall .level { stroke:var(--accent-2); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:440; stroke-dashoffset:440; transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1) .25s; }
  .wall.done .level { stroke-dashoffset:0; }
  .wall-cap { margin-top:.9rem; display:flex; justify-content:space-between; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:600; }
  .wall-cap b { color:var(--accent-2); font-weight:600; font-variant-numeric:tabular-nums; }
  @media (prefers-reduced-motion: reduce){ .wall .brick { transition:none; } .wall .level { transition:none; } }

/* ===== multi-page additions ===== */
#nav .logo { text-decoration:none; color:inherit; }
#nav .nav-links a[aria-current="page"] { color:var(--accent); }
.page-head { padding-top: 8.5rem; padding-bottom: 1.5rem; }
.page-head .sec-head { margin-bottom: 0; max-width: 760px; }
.page-head h1 { font-size: clamp(2.2rem,5.5vw,3.8rem); line-height:1.05; }
.page-lead { margin-top: 1rem; color: var(--ink-soft); font-weight:600; font-size:1.1rem; max-width: 560px; }
.page-cta { text-align:center; }
.page-cta .sec-head { margin: 0 auto 1.6rem; }
.page-cta .btn { margin: 0 auto; }
.wall-wrap--flat { display:block !important; }
.process { grid-template-columns: repeat(4,1fr); gap:1.2rem; }
@media (max-width:900px){ .process { grid-template-columns:repeat(2,1fr); } }
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:820px){ .mini-grid { grid-template-columns:1fr; } }
.mini { display:block; text-decoration:none; color:inherit; background:var(--bg-card); border:1px solid var(--line); border-radius:18px; padding:1.5rem 1.5rem 1.4rem; transition: border-color .25s, transform .25s, box-shadow .25s; }
.mini:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.mini .n { font-family:'Fraunces',serif; color:var(--accent); font-size:.9rem; letter-spacing:.08em; }
.mini h3 { margin:.5rem 0 .4rem; font-size:1.15rem; }
.mini p { color:var(--ink-soft); font-weight:500; font-size:.95rem; margin-bottom:.9rem; }
.mini .price { font-weight:700; font-size:.9rem; }
.mini-more { margin-top:1.6rem; font-weight:700; }
.mini-more a { color:var(--accent); text-decoration:none; }
.mini-more a:hover { text-decoration:underline; }
.work-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:780px){ .work-grid { grid-template-columns:1fr; } }
.work-grid .work-card { grid-template-columns:1fr; }
.work-grid .work-visual { min-height:220px; aspect-ratio:16/10; }
.work-grid .work-info { padding:1.6rem 1.7rem 1.8rem; }
.work-grid .work-info h3 { font-size:1.35rem; }
.work-grid .work-card + .work-card { margin-top:0; }
.work-grid .work-card.alt .work-visual { order:0; }
main.page-over { min-height: 60vh; }
.page-over.flat { border-radius:0; box-shadow:none; }

@media (max-width:600px){ .process { grid-template-columns:1fr; } }