@font-face{
    font-family:'Peace Sans';
    src: url('assets/fonts/peace-sans-webfont.ttf') format('truetype'),
         url('assets/fonts/peace-sans.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  :root{
    --pink: #C8437F;
    --pink-deep: #A8336A;
    --pink-soft: #FFB6B6;
    --pink-soft2: #FFC9C9;
    --navy: #2A2452;
    --navy-2: #1F1B45;
    --ink: #1F1514;
    --footer-dark: #241B1A;
    --footer-dark-2: #2E2220;
    --pill-grey: #DEDEDE;
    --pill-grey-dark: #cfcfcf;
    --paper: #FFFDFB;
    --grid-line: rgba(200,67,127,0.16);
    --text-body: #35302f;
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --ease: cubic-bezier(.22,1,.36,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins', sans-serif;
    color:var(--text-body);
    background:var(--paper);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}
  ::selection{background:var(--pink);color:#fff;}

  /* ---------- intro splash ----------
     The landing greeting. Two bubbles share one grid cell: the first
     hides at 0.9s exactly as the second appears, so they read as one
     bubble changing its mind. The curtain then fades at 1.7s.

     Timings live here rather than in JS so the whole sequence is
     declarative; the per-character delays are inline in index.html.
     Scoped to .page-home — the element exists on no other page, and
     the scoping keeps it that way even if one is copied later.

     Metrics are the reference's own, read off the live page: curtain
     #fdfdfb, a 2px #191510 outline, the fill in this site's own pink,
     16px radius with the top-left squared off, 12px/16px padding,
     40px type at 1.1. The one thing not copied is the typeface — the
     reference sets Inter, which this site does not load, so the
     bubble uses Poppins 500, the closest of the two families already
     in the page. */
  .page-home .intro-splash{
    position:fixed; inset:0; z-index:1000;   /* above the toast at 999 */
    display:grid; place-items:center;
    background:#fdfdfb;
    pointer-events:none;                     /* never swallows a click */
    animation: introOut .45s ease 1.7s forwards;
  }
  .page-home .intro-bubble{
    grid-area: 1 / 1;                        /* both bubbles stack in one cell */
    max-width:min(86vw, 760px);
    padding:12px 16px;
    background:var(--pink);
    color:#fff;
    border:2px solid #191510;
    border-radius:16px;
    border-top-left-radius:0;                /* the speech-bubble corner */
    font-family:'Poppins', sans-serif;
    font-weight:500;
    font-size:clamp(1.875rem, 4.4vw, 2.5rem);
    line-height:1.1;
    text-align:center;
  }
  .page-home .intro-bubble-1{ animation: introSwap 10ms linear .9s forwards; }
  .page-home .intro-bubble-2{ opacity:0; animation: introIn 10ms linear .9s forwards; }
  .page-home .intro-char{
    display:inline-block;
    opacity:0; transform:translateY(.3em);
    animation: introIn .22s ease forwards;   /* delay is inline, per character */
  }
  @keyframes introIn  { to{ opacity:1; transform:none; } }
  @keyframes introSwap{ to{ opacity:0; visibility:hidden; } }
  @keyframes introOut { to{ opacity:0; visibility:hidden; } }

  @media (prefers-reduced-motion: reduce){
    .page-home .intro-splash{ display:none; }
  }

  /* ---------- scroll progress bar ---------- */
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg, var(--pink), var(--navy));
    z-index:300; transition:width .1s linear;
  }

  .script{font-family:'Peace Sans', 'Caveat', cursive;}

  /* ---------- scroll reveal ---------- */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-delay-1{transition-delay:.08s;}
  .reveal-delay-2{transition-delay:.16s;}
  .reveal-delay-3{transition-delay:.24s;}
  .reveal-delay-4{transition-delay:.32s;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- paper bg (real grid texture, low opacity, white base) ---------- */
  .paper-bg{
    position:relative;
    background-color:#ffffff;
    isolation:isolate;
  }
  .paper-bg::before{
    content:"";
    position:absolute; inset:0;
    background-image:url('assets/images/paper-bg-texture.webp');
    background-size: 90px 90px;
    background-repeat:repeat;
    opacity:0.22;
    z-index:0;
    pointer-events:none;
  }
  .paper-bg::after{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0) 0%, #ffffff 92%);
    z-index:0;
    pointer-events:none;
  }
  .hero-stage{ position:relative; z-index:1; }

  /* ================= NAVBAR ================= */
  .site-header{
    position:sticky; top:0; z-index:100;
    padding: 18px 5vw 0;
    display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
    pointer-events:none;
  }
  /* On the homepage the blossom photo runs to the very top of the
     viewport and the nav floats over it. A sticky header still takes
     its ~74px of flow space, and that space reads as a band of page
     background above the photo. Fixed takes it out of the flow so the
     hero starts at y 0; behaviour is otherwise identical, because a
     top:0 sticky header at the start of the document is already stuck
     from the first frame and never scrolls away.

     Home only — every other page opens on a content column that needs
     the header's height as clearance. */
  .page-home .site-header{ position:fixed; left:0; right:0; }
  .nav-pill{
    grid-column:2; justify-self:center;
    pointer-events:all;
    display:flex; align-items:center; gap:6px;
    background:var(--navy);
    border-radius:999px;
    padding:6px 10px 6px 6px;
    box-shadow:0 10px 30px -10px rgba(42,36,82,0.55);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  }
  .nav-pill:hover{ box-shadow:0 14px 34px -8px rgba(42,36,82,0.65); }

  /* Frosted translucent glass. Opted into per page rather than applied to
     .nav-pill outright, so a page with a dark header keeps the navy pill. */
  .page-home .nav-pill,
  .page-fluence .nav-pill,
  .page-about .nav-pill,
  .page-hoopr .nav-pill,
  .page-unseen .nav-pill,
  .page-fresh .nav-pill,
  .page-otherworks .nav-pill{
    background:rgba(255,255,255,0.55);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(255,255,255,0.55);
    box-shadow:0 10px 30px -12px rgba(60,40,50,0.35);
  }
  .page-home .nav-pill:hover,
  .page-fluence .nav-pill:hover,
  .page-about .nav-pill:hover,
  .page-hoopr .nav-pill:hover,
  .page-unseen .nav-pill:hover,
  .page-fresh .nav-pill:hover,
  .page-otherworks .nav-pill:hover{ box-shadow:0 14px 34px -10px rgba(60,40,50,0.45); }
  .page-home .nav-links a,
  .page-fluence .nav-links a,
  .page-about .nav-links a,
  .page-hoopr .nav-links a,
  .page-unseen .nav-links a,
  .page-fresh .nav-links a,
  .page-otherworks .nav-links a{ color:var(--ink); }
  .page-home .nav-links a:hover,
  .page-fluence .nav-links a:hover,
  .page-about .nav-links a:hover,
  .page-hoopr .nav-links a:hover,
  .page-unseen .nav-links a:hover,
  .page-fresh .nav-links a:hover,
  .page-otherworks .nav-links a:hover{ background:rgba(31,21,20,0.07); color:var(--ink); }
  .page-home .nav-links a.active,
  .page-fluence .nav-links a.active,
  .page-about .nav-links a.active,
  .page-hoopr .nav-links a.active,
  .page-unseen .nav-links a.active,
  .page-fresh .nav-links a.active,
  .page-otherworks .nav-links a.active{ color:var(--ink); background:rgba(31,21,20,0.10); }
  .nav-avatar{
    width:42px;height:42px;border-radius:50%;
    background:#fff; border:2px solid #fff;
    overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition: transform .4s var(--ease), border-color .25s ease, box-shadow .25s ease;
  }
  /* On the homepage the icon is the "you are here" marker, so it wears the
     same pink accent the active link's dot uses. On the case-study pages the
     icon is a link back home instead, and stays plain. */
  .page-home .nav-avatar{
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(200,67,127,0.22);
  }
  .nav-pill:hover .nav-avatar{ transform: rotate(-8deg) scale(1.06); }
  .nav-avatar img{width:100%;height:100%;object-fit:cover;}
  .nav-links{display:flex; align-items:center; gap:2px;}
  .nav-links a{
    color:#f2f0f7; font-size:0.94rem; font-weight:500;
    padding:10px 16px; border-radius:999px; position:relative;
    transition:color .25s ease, background .25s ease;
    white-space:nowrap;
  }
  .nav-links a:hover{ background:rgba(255,255,255,0.1); color:#fff; }
  .nav-links a.active{ color:#fff; background:rgba(255,255,255,0.14); }
  .nav-links a .dot{
    position:absolute; bottom:6px; left:50%; width:4px; height:4px; border-radius:50%;
    background:var(--pink); transform:translate(-50%,6px) scale(0); transition:transform .25s var(--ease);
  }
  .nav-links a.active .dot{ transform:translate(-50%,0) scale(1); }

  .social-cluster{
    grid-column:3; justify-self:end;
    pointer-events:all;
    display:flex; gap:10px;
  }
  .social-cluster a{
    width:42px; height:42px; border-radius:50%;
    background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition: transform .35s var(--ease), background .35s ease;
    box-shadow:0 8px 18px -8px rgba(0,0,0,0.4);
  }
  .social-cluster a:hover{ transform:translateY(-4px) rotate(-8deg) scale(1.06); background:var(--pink); }
  .social-cluster svg{width:18px;height:18px;}

  .nav-toggle{ grid-column:3; justify-self:end; display:none; pointer-events:all; }

  /* mobile menu (base, hidden on all sizes until toggled + only reachable on small screens) */
  .mobile-menu{
    position:fixed; inset:0; background:rgba(31,21,20,0.6); backdrop-filter:blur(4px);
    z-index:200; display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .mobile-menu.open{ opacity:1; pointer-events:all; }
  .mobile-menu-panel{
    background:var(--navy); width:100%; border-radius:28px 28px 0 0; padding:28px 24px 40px;
    transform:translateY(100%); transition:transform .4s var(--ease); position:relative;
  }
  .mobile-menu.open .mobile-menu-panel{ transform:translateY(0); }
  .mobile-menu-panel a{
    display:flex; align-items:center; justify-content:space-between; color:#fff; padding:16px 6px;
    font-size:1.15rem; font-weight:500; border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .mobile-menu-panel .msocial{ display:flex; gap:12px; margin-top:20px; }
  .mobile-menu-panel .msocial a{ width:42px;height:42px; border-radius:50%; background:rgba(255,255,255,0.1); justify-content:center; padding:0; border:none; }
  .mobile-close{ position:absolute; top:18px; right:22px; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; }

  /* ================= HERO =================
     Laid out against the 1440x932 Figma frame. The stage keeps that aspect
     ratio and every child is positioned as a % of it, so the composition
     scales proportionally instead of reflowing. cqw units size the type
     against the stage width (1px @1440 = 0.06944cqw). */
  .hero{
    position:relative;
    background:url('assets/images/hero-blossom.jpg') center/cover no-repeat;
    padding:0;
    display:block;
    min-height:auto;
  }
  /* The blossom video, laid over the section's background image and
     cropped the same way `center/cover` crops it, so the framing is
     unchanged. .hero-stage is z-index 1, so it stays above this. */
  .hero-video{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    pointer-events:none;
  }
  /* Eight seconds of looping motion is exactly what this setting is
     for; hiding the video falls back to the still underneath. */
  @media (prefers-reduced-motion: reduce){
    .hero-video{ display:none; }
  }
  .hero-stage{
    position:relative;
    width:100%; max-width:1440px; margin-inline:auto;
    aspect-ratio: 1440 / 932;
    container-type: inline-size;
  }
  /* Land with the whole hero in view. The stage is a fixed 1440x932
     frame and everything inside it is placed as a percentage of that
     frame, so its height grows with the viewport width and on a wide
     screen the CTA and the scroll cue drop below the fold.

     Width stays the single driver — height follows from aspect-ratio —
     so adding the viewport height as one more term of the min() keeps
     the composition's proportions exactly and simply scales the whole
     frame down until it fits. Capping max-height instead would clamp
     the height without narrowing the width, which would stretch every
     percentage inside it.

     Desktop only: below 1100px the stage drops the fixed ratio and
     flows, where a height cap would make no sense. */
  @media (min-width: 1101px){
    .hero-stage{ width:min(100%, 1440px, calc(100vh * 1440 / 932)); }
  }

  /* --- the perforated paper card --- */
  .hero-card{
    position:absolute;
    left:21.67%;  width:57.22%;      /* 312 .. 1136 */
    top:25.75%;   height:60.62%;     /* 240 .. 805  */
  }
  .hc-paper{
    position:absolute; inset:0; z-index:0;
    background:#F8FCFE;
    border-radius:4px;
    filter:drop-shadow(0 18px 34px rgba(60,40,50,0.22));
    --perf: 1.02cqw;    /* notch radius, ~14.7px @1440 */
    --gap: 2.36cqw;     /* notch pitch,  ~34px   @1440 */
    /* four layers of half-circle notches, one per edge, intersected so every
       edge keeps its perforations. Each tile spans the full opposite axis, so
       only the circle's own position matters. */
    -webkit-mask:
      radial-gradient(var(--perf) at 50% 0,    #0000 97%, #000) 50% 0 / var(--gap) 100% repeat-x,
      radial-gradient(var(--perf) at 50% 100%, #0000 97%, #000) 50% 0 / var(--gap) 100% repeat-x,
      radial-gradient(var(--perf) at 0 50%,    #0000 97%, #000) 0 50% / 100% var(--gap) repeat-y,
      radial-gradient(var(--perf) at 100% 50%, #0000 97%, #000) 0 50% / 100% var(--gap) repeat-y;
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(var(--perf) at 50% 0,    #0000 97%, #000) 50% 0 / var(--gap) 100% repeat-x,
      radial-gradient(var(--perf) at 50% 100%, #0000 97%, #000) 50% 0 / var(--gap) 100% repeat-x,
      radial-gradient(var(--perf) at 0 50%,    #0000 97%, #000) 0 50% / 100% var(--gap) repeat-y,
      radial-gradient(var(--perf) at 100% 50%, #0000 97%, #000) 0 50% / 100% var(--gap) repeat-y;
    mask-composite: intersect;
  }
  .hero-card > *:not(.hc-paper){ position:absolute; z-index:1; }

  /* --- pieces on the card, measured off the Figma frame --- */
  /* Measured off the card export (Group 275): note and stamp both sit at their
     natural size, and the stamp's origin is +265px / +63px from the note's,
     which drops it onto the note's torn right edge. Those offsets are what the
     percentages below encode, so the pair stays glued at any width. The asset
     already carries its own tilt — rotating it again overshot the reference. */
  .hc-title{ left:2.2%; top:14.2%; width:37.1%; margin:0; }
  .hc-title img{ width:100%; height:auto; display:block; }

  .hc-stamp{ left:34.32%; top:25.33%; width:14.55%; height:auto; }
  .hc-polaroid{ left:61.9%; top:-1.4%; width:45.9%; height:auto; }
  .hc-avatar{ left:85.7%; top:72.2%; width:9.7%; height:auto; }

  /* The copy block starts on the note's own left edge (7.05% = where the torn
     paper begins) and stops short of the photo. 62.5% is the middle of the
     62–63% band that wraps to five lines with a short opening line, which is
     the only line high enough to reach the photo's rows. Both the width and
     the font size are proportional to the stage, so that wrap is the same at
     every desktop width. */
  .hc-desc{
    left:7.05%; top:62.3%; width:62.5%;
    font-size:1.32cqw; line-height:1.34; color:var(--pink);
  }
  .hc-aside{
    left:7.05%; top:88.3%; width:52%;
    font-size:1.04cqw; line-height:1.45; color:var(--ink);
  }

  /* --- See my work: sits off the card's bottom-right, over the photo --- */
  .hero-cta{
    position:absolute; left:80.55%; top:81.2%;
    display:inline-flex; align-items:center; justify-content:center;
    gap:0.55cqw;
    min-width:9.17%; padding:0.63cqw 1.15cqw;
    background:#fff; color:var(--ink);
    font-size:1.11cqw; font-weight:500; line-height:1.3;
    border-radius:999px; white-space:nowrap;
    box-shadow:0 8px 18px -8px rgba(60,40,50,0.45);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .hero-cta svg{
    width:1.02cqw; height:1.02cqw; flex-shrink:0;
    transition:transform .35s var(--ease);
  }
  .hero-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 24px -10px rgba(60,40,50,0.5); }
  .hero-cta:hover svg{ transform:translateX(3px); }

  .btn{
    position:relative; display:inline-flex; align-items:center; gap:10px;
    padding:14px 28px; border-radius:999px;
    background:var(--navy); color:#fff; font-weight:600; font-size:0.95rem;
    overflow:hidden; isolation:isolate;
    transition: color .4s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
    box-shadow:0 10px 24px -10px rgba(42,36,82,0.6);
  }
  .btn::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:var(--pink);
    transform: translateX(-102%);
    transition: transform .45s var(--ease);
  }
  .btn:hover::before{ transform:translateX(0); }
  .btn:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -10px rgba(200,67,127,0.55); }
  .btn:active{ transform:translateY(-1px) scale(.98); }
  .btn svg{ transition: transform .35s var(--ease); }
  .btn:hover svg{ transform: translateX(4px); }
  .ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,0.55);
    transform:scale(0); animation: rippleAnim .6s ease-out forwards; pointer-events:none;
  }
  @keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

  .scroll-cue{
    position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    color:var(--pink-deep); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
    opacity:0.75; animation: cueBounce 2.2s ease-in-out infinite; z-index:2;
  }
  .scroll-cue svg{ width:16px; height:16px; }
  @keyframes cueBounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

  /* ================= SELECTED WORKS ================= */
  .works{
    padding: 90px 6vw 110px;
    position:relative;
    isolation:isolate;
    cursor: url('assets/images/cursor-star.png') 0 0, auto;
  }
  .works *{ cursor: url('assets/images/cursor-star.png') 0 0, auto; }
  .works .project-item{ cursor: url('assets/images/cursor-star.png') 0 0, auto; }
  .works > *{ position:relative; z-index:1; }
  .section-tag{
    font-size:0.78rem; letter-spacing:0.18em; font-weight:700; text-transform:uppercase;
    color:var(--pink-deep); margin-bottom:8px; display:block;
  }
  .section-title{
    font-family:'Peace Sans', 'Caveat', cursive; font-weight:400; font-size:clamp(1.7rem,2.8vw,2.3rem);
    color:var(--navy); margin-bottom:46px; position:relative; display:inline-block;
  }

  .works-grid{
    display:grid;
    grid-template-columns: minmax(280px, 460px) 1fr;
    gap: 60px;
    align-items:start;
  }

  .project-list{ display:flex; flex-direction:column; gap:18px; position:relative; }
  .project-item{
    position:relative;
    /* tab colour comes from the supplied asset, per project */
    background:var(--pill, var(--pill-grey));
    border-radius: var(--radius-lg);
    /* the supplied tabs are all 572x114, so height follows width and every
       tab matches, whatever its wordmark's own proportions are */
    aspect-ratio: 572 / 114;
    padding: 0;
    cursor:pointer;
    transition: background .35s var(--ease), transform .12s linear, box-shadow .35s var(--ease);
    display:flex; align-items:center; justify-content:center;
    will-change: transform;
    transform-style: preserve-3d;
    perspective: 600px;
  }
  /* the wordmark is the visible label; .pname stays for assistive tech */
  .project-item .pname{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .project-item .pmark{
    display:block; width:var(--markw, 32%); height:auto;
    transition: transform .3s var(--ease);
  }
  .project-item:hover, .project-item.active{
    box-shadow: 0 16px 34px -18px rgba(42,36,82,0.35), 0 0 0 2px var(--pink-soft) inset;
  }
  .project-item:hover .pmark, .project-item.active .pmark{ transform:scale(1.03); }
  .project-item:hover .arrow svg, .project-item.active .arrow svg{ fill:#fff; }

  .you-badge{
    position:absolute;
    display:flex; align-items:center; gap:6px;
    top:50%; left:100%; margin-left:14px; transform:translateY(-50%) translateX(-8px) scale(.9);
    opacity:0; pointer-events:none; transition: all .3s var(--ease);
    z-index:5;
  }
  .project-item:hover .you-badge, .project-item.active .you-badge{ opacity:1; transform:translateY(-50%) translateX(0) scale(1); }
  .you-badge .tri{
    width:0;height:0;
    border-top:9px solid transparent; border-bottom:9px solid transparent;
    border-right:13px solid var(--ink);
  }
  .you-badge .pill{
    background:var(--ink); color:#fff; font-weight:700; font-size:0.72rem; letter-spacing:0.06em;
    padding:9px 18px; border-radius:999px; white-space:nowrap;
    box-shadow:0 10px 18px -8px rgba(0,0,0,0.45);
  }

  .other-works-pill{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    align-self:flex-start; margin-top:14px; padding:13px 30px;
    background:var(--navy); color:#fff;
    border-radius:999px;
    font-weight:600; font-size:0.95rem; letter-spacing:0.01em;
    text-decoration:none;
    overflow:hidden; isolation:isolate; cursor:pointer;
    box-shadow:0 14px 26px -14px rgba(42,36,82,0.55);
    transition: color .4s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .other-works-pill::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:var(--pink);
    transform: translateX(-102%);
    transition: transform .45s var(--ease);
  }
  .other-works-pill:hover::before{ transform:translateX(0); }
  .other-works-pill:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 30px -10px rgba(200,67,127,0.55);
  }
  .other-works-pill:active{ transform:translateY(-1px) scale(.98); }
  .other-works-pill svg{ transition: transform .35s var(--ease); }
  .other-works-pill:hover svg{ transform: translateX(4px); }

  .preview-stage{
    position:sticky; top:110px;
    min-height:480px;
    display:flex; align-items:center; justify-content:center;
  }
  .preview-card-wrap{ position:relative; width:100%; max-width:640px; aspect-ratio: 4/3.1; }
  .preview-float{ width:100%; max-width:640px; animation: previewFloat 5s ease-in-out infinite; }
  @keyframes previewFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
  .preview-entrance{
    width:100%; max-width:640px;
  }
  .preview-card-face{
    position:absolute; inset:0;
    opacity:0; transform: scale(0.88) translateY(22px) rotate(-3deg);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    pointer-events:none;
  }
  .preview-stage.active .preview-card-face{
    opacity:1; transform: scale(1) translateY(0) rotate(0deg);
    pointer-events:auto;
  }
  .preview-back, .preview-front{
    position:absolute; inset:0;
    border-radius: var(--radius-lg);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
  }
  .preview-back{
    background: var(--pink-soft2);
    transform: rotate(6deg) scale(0.92) translate(6%, 8%);
    opacity:.9;
  }
  .preview-front{
    background: linear-gradient(150deg, var(--proj-c1, #FFB6B6), var(--proj-c2, #ff9a9a));
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:30px;
    overflow:hidden;
    box-shadow: 0 30px 50px -20px rgba(42,36,82,0.3);
  }
  .preview-front::before{
    content:""; position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,0.5), transparent 40%),
      radial-gradient(circle at 85% 75%, rgba(0,0,0,0.08), transparent 45%);
  }
  .preview-front .p-icon{
    font-family:'Caveat', cursive; font-weight:700; font-size:4.6rem; color:rgba(255,255,255,0.85);
    line-height:1; margin-bottom:6px; position:relative; z-index:1;
  }
  .preview-front .p-tag{
    align-self:flex-start;
    background:rgba(255,255,255,0.85); color:var(--ink); font-size:0.72rem; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:14px;
    position:relative; z-index:1;
  }
  .preview-front h3{
    font-size:1.7rem; font-weight:700; color:#fff; margin-bottom:8px; position:relative; z-index:1;
  }
  .preview-front p{
    font-size:0.92rem; color:rgba(255,255,255,0.92); line-height:1.5; position:relative; z-index:1;
  }

  /* --- supplied card artwork replaces the generated placeholder --- */
  .p-card-img{ display:none; width:100%; height:100%; object-fit:contain; }
  .preview-front.has-card{ background:none; box-shadow:none; padding:0; }
  .preview-front.has-card::before{ display:none; }
  .preview-front.has-card > *:not(.p-card-img){ display:none; }
  .preview-front.has-card .p-card-img{ display:block; }
  /* the artwork carries its own offset block and tag pill */
  .preview-card-face.has-card .preview-back,
  .preview-card-face.has-card .deco-chip{ display:none; }

  /* The sticker rides the card in: same entrance transform and timing as
     .preview-card-face, so the two arrive as one object instead of the card
     sliding up to a badge that was already parked. It is a wrapper rather than
     a transform on .suhani-badge itself because the badge's transform is
     already spoken for by its float animation, and the img's by the magnetic
     pull — three transforms, three elements, no fighting. */
  .badge-rider{
    position:absolute; inset:0; z-index:6; pointer-events:none;
    transform: scale(0.88) translateY(22px) rotate(-3deg);
    transition: transform .5s var(--ease);
  }
  .preview-stage.active .badge-rider{ transform: scale(1) translateY(0) rotate(0deg); }

  .suhani-badge{
    position:absolute; top:6%; left:96%;
    width:130px; height:65px;
    animation: floatbadge 6s ease-in-out infinite;
  }
  @keyframes floatbadge{
    0%,100%{ transform:translate(0,0) rotate(0deg); }
    25%{ transform:translate(5px,-9px) rotate(-3deg); }
    50%{ transform:translate(-4px,-4px) rotate(2deg); }
    75%{ transform:translate(4px,3px) rotate(-2deg); }
  }
  .suhani-badge-img{
    width:100%; height:100%; display:block;
    will-change:transform; transition: transform .18s ease-out;
    filter: drop-shadow(0 8px 14px rgba(168,51,106,0.45));
  }

  /* scattered sticker-style tag chips around the preview card */
  .deco-chip{
    position:absolute; z-index:7;
    display:inline-flex; align-items:center; gap:7px;
    background:#fff; color:var(--ink); font-weight:700; font-size:0.74rem; letter-spacing:0.01em;
    padding:9px 16px; border-radius:999px; white-space:nowrap;
    box-shadow:0 12px 22px -10px rgba(42,36,82,0.4);
    border:1.5px solid rgba(31,21,20,0.06);
  }
  .deco-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--proj-c2, #E4568F); flex-shrink:0; }
  .chip-a{ top:-18px; left:-22px; transform:rotate(-9deg); animation: chipFloatA 4.6s ease-in-out infinite; }
  .chip-b{ bottom:-16px; left:8%; transform:rotate(6deg); animation: chipFloatB 5.3s ease-in-out infinite; }
  @keyframes chipFloatA{ 0%,100%{ transform:rotate(-9deg) translateY(0); } 50%{ transform:rotate(-9deg) translateY(-7px); } }
  @keyframes chipFloatB{ 0%,100%{ transform:rotate(7deg) translateY(0); } 50%{ transform:rotate(7deg) translateY(7px); } }

  .preview-hint{
    position:absolute; bottom:-38px; left:0; right:0; text-align:center;
    font-size:0.82rem; color:#9a908e;
  }

  .preview-idle{
    position:absolute; display:flex; flex-direction:column; align-items:center; gap:12px;
    color:#c3b6b2; font-size:0.9rem; font-weight:500; text-align:center;
    opacity:1; transition: opacity .4s ease;
    pointer-events:none;
  }
  .preview-stage.active .preview-idle{ opacity:0; }
  .preview-idle .ring{
    width:64px; height:64px; border-radius:50%; border:2px dashed var(--pink-soft);
    display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--pink);
    animation: idleSpin 10s linear infinite;
  }
  @keyframes idleSpin{ to{ transform:rotate(360deg); } }

  /* mobile inline preview */
  .inline-preview{ display:none; }

  /* ================= ABOUT ================= */
  .about{
    position:relative;
    padding: 0 6vw;
  }
  .about-banner{
    position:relative;
    border-radius: 34px;
    overflow:hidden;
    background-size:cover; background-position:center;
    min-height: 560px;
    display:flex; align-items:center;
    color:#fff;
    box-shadow: 0 40px 70px -30px rgba(168,51,106,0.45);
  }
  .about-banner::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(20,10,20,0.15) 0%, rgba(20,10,20,0.02) 45%);
  }
  .about-copy{
    position:relative; z-index:2;
    width:58%; margin-left:auto;
    padding: 50px 46px 50px 10px;
  }
  .about-copy h2{
    font-family:'Peace Sans', 'Caveat', cursive; font-weight:400; font-size:clamp(1.9rem,3.1vw,2.7rem);
    margin-bottom:18px;
  }
  .about-copy h3{ font-size:1.35rem; font-weight:600; margin-bottom:14px; }
  .about-copy p{ font-size:1.12rem; line-height:1.65; margin-bottom:14px; color:rgba(255,255,255,0.96); max-width:52ch; }
  .about-copy .btn-light{
    margin-top:14px; display:inline-flex; align-items:center; gap:10px;
    background:#fff; color:var(--navy); font-weight:700; padding:14px 30px; border-radius:999px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s ease;
    box-shadow:0 14px 26px -12px rgba(0,0,0,0.4);
    position:relative; overflow:hidden; isolation:isolate;
  }
  .about-copy .btn-light:hover{ transform:translateY(-3px); background:var(--navy); color:#fff; }

  /* ================= MAKING IDEAS WORTH REMEMBERING ================= */
  .make-remember{
    position:relative;
    padding: 90px 6vw 100px;
    overflow:hidden;
  }
  .make-remember > *{ position:relative; z-index:1; }
  .mr-wrap{ margin-top:50px; }
  .mr-title{
    font-family:'Peace Sans', 'Caveat', cursive;
    font-weight:400;
    font-size: clamp(3rem, 5.4vw, 5.2rem);
    color:var(--pink);
    line-height:1.06;
    margin-bottom:24px;
  }
  .mr-sub{
    font-size:1.2rem; color:var(--ink); max-width:70ch; white-space:nowrap;
  }
  @media (max-width:1350px){
    .mr-sub{ white-space:normal; }
  }
  /* stronger scroll reveal for this block — travels further, takes longer,
     and the sub-line follows the heading instead of arriving with it */
  .mr-title.reveal{ transform:translateY(64px); transition-duration:1.05s; }
  .mr-sub.reveal{ transform:translateY(44px); transition-duration:1.05s; transition-delay:.18s; }
  .mr-title.reveal.in, .mr-sub.reveal.in{ transform:translateY(0); }
  .mr-deco{
    position:absolute; top:0; right:5vw; width:min(20vw, 260px);
    z-index:0; pointer-events:none; opacity:0.95;
  }
  .mr-deco img{ width:100%; height:auto; display:block; }

  /* ================= FOOTER ================= */
  .site-footer{
    margin-top: 90px;
    background: var(--footer-dark);
    position:relative;
    overflow:hidden;
    padding: 90px 6vw 50px;
    color:#f2ece9;
    text-align:center;
  }
  .leaf{ position:absolute; opacity:0.4; }
  .leaf img{ width:280px; height:auto; display:block; }
  .leaf.tl{ top:-30px; left:-40px; }
  .leaf.br{ bottom:-40px; right:-40px; }

  .avail-wrap{
    position:relative; display:inline-block; margin-bottom:22px;
  }
  .avail-badge{
    position:absolute; top:-14px; left:50%; transform:translate(-50%,-100%);
    display:flex; align-items:center; gap:8px;
    background:#4a4342; color:#fff; font-size:0.86rem; font-weight:500;
    padding:9px 16px 9px 12px; border-radius:999px; white-space:nowrap;
    box-shadow:0 10px 20px -8px rgba(0,0,0,0.5);
  }
  .avail-badge .pulse-dot{
    width:9px;height:9px;border-radius:50%; background:#3fa9ff; position:relative; flex-shrink:0;
  }
  .avail-badge .pulse-dot::after{
    content:""; position:absolute; inset:-5px; border-radius:50%; background:#3fa9ff; opacity:.5;
    animation: pulse 1.8s ease-out infinite;
  }
  @keyframes pulse{ 0%{ transform:scale(0.6); opacity:.6;} 100%{ transform:scale(2.2); opacity:0;} }

  .footer-avatar{
    width:130px; height:130px; border-radius:50%; background:#fdf7f4;
    overflow:hidden; margin:0 auto;
    box-shadow:0 20px 40px -14px rgba(0,0,0,0.55);
    border:4px solid rgba(255,255,255,0.08);
    transition: transform .4s var(--ease);
    animation: avatarSway 6s ease-in-out infinite;
  }
  @keyframes avatarSway{ 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } }
  .avail-wrap:hover .footer-avatar{ transform: scale(1.05) rotate(-3deg); animation-play-state:paused; }
  .footer-avatar img{ width:100%; height:100%; object-fit:contain; }

  .site-footer h2{
    font-family:'Peace Sans', 'Poppins', sans-serif;
    font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:400; letter-spacing:0.01em; margin-bottom:34px;
  }
  .contact-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
  .contact-list li{ font-size:1.02rem; color:#e8dfdc; }
  .contact-list a, .copy-email{
    text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,0.35);
    transition: color .25s ease, text-decoration-color .25s ease;
  }
  .contact-list a:hover, .copy-email:hover{ color:var(--pink-soft); text-decoration-color:var(--pink-soft); }
  .copy-email{ background:none; border:none; color:inherit; font:inherit; cursor:pointer; }

  .footer-bottom{
    margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
    font-size:0.82rem; color:#a99f9c;
  }
  .to-top{
    display:inline-flex; align-items:center; gap:6px;
    color:#f2ece9; font-weight:600; font-size:0.82rem;
    padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.18);
    transition: background .3s ease, transform .3s var(--ease);
  }
  .to-top:hover{ background:rgba(255,255,255,0.08); transform:translateY(-2px); }
  .to-top svg{ width:12px; height:12px; transform: rotate(-90deg); transition: transform .35s var(--ease); }
  .to-top:hover svg{ transform: rotate(-90deg) translateX(3px); }

  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:#fff; padding:12px 22px; border-radius:999px;
    font-size:0.88rem; font-weight:500; opacity:0; pointer-events:none;
    transition: all .35s var(--ease); z-index:999; box-shadow:0 16px 30px -10px rgba(0,0,0,.5);
    display:flex; align-items:center; gap:8px;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------------- responsive ---------------- */
  /* Desktop (1200px+) is the source of truth and is left untouched.
     Everything below only adapts the same design to narrower screens. */

  /* ================= TABLET : 768px – 1199px ================= */
  @media (min-width: 768px) and (max-width: 1199px){
    /* the SUHANI sticker hangs off the right of the card (left:96%);
       below 1200px there is no room for it, so anchor it to the card corner */
    .suhani-badge{ left:auto; right:-14px; top:-30px; width:116px; height:58px; }
    .leaf img{ width:200px; }
  }

  /* Growing the preview card pushes its right edge outward by half the growth,
     which eats the margin the hanging sticker needs. At 640px the sticker only
     clears the viewport from ~1408px up, so below that it takes the same
     card-corner anchoring the tablet range already uses. */
  @media (min-width: 1200px) and (max-width: 1407px){
    .suhani-badge{ left:auto; right:-14px; top:-30px; width:116px; height:58px; }
  }

  /* below ~980px the centred nav pill and the social cluster collide */
  @media (min-width: 768px) and (max-width: 980px){
    .site-header{ padding:18px 3vw 0; }
    .nav-links a{ font-size:0.84rem; padding:9px 11px; }
    .nav-avatar{ width:36px; height:36px; }
    .social-cluster{ gap:8px; }
    .social-cluster a{ width:36px; height:36px; }
    .social-cluster svg{ width:16px; height:16px; }
  }

  /* Below ~1100px the proportional stage would shrink the copy past
     readability, so the card stops scaling and starts flowing instead.
     Same assets, same order, same card. */
  @media (max-width: 1100px){
    .hero{ padding:clamp(104px, 13vw, 140px) 5vw clamp(46px, 6vw, 70px); }
    .hero-stage{ aspect-ratio:auto; container-type:normal; max-width:720px; }
    .hero-card{
      position:relative; left:auto; top:auto; width:100%; height:auto;
      padding:clamp(26px, 4.5vw, 40px) clamp(20px, 4vw, 36px) clamp(30px, 5vw, 44px);
    }
    .hero-card > *:not(.hc-paper){ position:static; }
    .hc-title{ width:min(74%, 300px); margin:0 0 6px; }
    .hc-polaroid{ width:min(58%, 250px); margin:0 0 18px auto; display:block; }
    .hc-stamp{
      position:absolute; top:clamp(20px,3.6vw,34px); right:clamp(18px,4vw,34px);
      width:clamp(52px, 7.5vw, 74px);
    }
    .hc-desc{ width:100%; font-size:clamp(0.95rem, 2.1vw, 1.08rem); margin-bottom:14px; }
    .hc-aside{ width:100%; font-size:clamp(0.82rem, 1.7vw, 0.92rem); }
    .hc-avatar{
      position:absolute; right:clamp(16px,3.4vw,30px); bottom:clamp(14px,2.6vw,24px);
      width:clamp(52px, 7.5vw, 76px);
    }
    .hero-cta{
      position:relative; left:auto; top:auto;
      display:flex; width:max-content; margin:20px auto 0;
      padding:12px 26px; font-size:0.95rem; min-width:0; gap:8px;
    }
    .hero-cta svg{ width:15px; height:15px; }
  }

  @media (max-width: 980px){
    .works-grid{ grid-template-columns:1fr; }
    .preview-stage{ position:relative; top:0; min-height:340px; margin-top:10px; }
    .about-copy{ width:100%; padding:40px 26px; }
    .about-banner{ min-height:auto; }
  }

  /* ================= MOBILE : ≤767px ================= */
  @media (max-width: 767px){
    .site-header{ padding:14px 4vw 0; }
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; align-items:center; justify-content:center; width:44px;height:44px; border-radius:50%; background:var(--navy); }
    .nav-toggle svg{ width:18px; height:18px; }
    .nav-pill{ padding:6px; }
    .social-cluster{ display:none; }

    /* mobile menu: reachable close button + scrollable on short screens */
    .mobile-menu-panel{ max-height:88vh; overflow-y:auto; }
    .mobile-close{ top:12px; right:16px; font-size:2rem; padding:4px 10px; }

    .hero{ padding:110px 6vw 40px; text-align:left; }
    .hc-title{ width:min(84%, 260px); }
    .hc-polaroid{ width:min(66%, 210px); }
    .scroll-cue{ display:none; }

    .works{ padding:60px 6vw 70px; }
    /* 4/3.1 leaves the card too short to hold its own text on a phone */
    .preview-card-wrap{ aspect-ratio:4/4.2; }
    .suhani-badge{ left:auto; right:-10px; top:-26px; width:104px; height:52px; }
    .chip-a{ top:-16px; left:-10px; }
    .chip-b{ left:2%; }

    .about{ padding:0 4vw; }
    .about-copy{ padding:34px 22px; }
    .about-banner{ border-radius:26px; }

    .make-remember{ padding:70px 6vw 100px; }
    .mr-deco{ width:30vw; opacity:0.7; }
    .mr-title{ font-size:clamp(2rem, 8.5vw, 3rem); }
    .mr-title br{ display:none; }
    .mr-sub{ white-space:normal; font-size:1.05rem; }

    .site-footer{ padding:70px 5vw 40px; }
    /* markup is .leaf img — the old .leaf svg rule never matched */
    .leaf img{ width:150px; }
    .avail-badge{ font-size:0.8rem; }
    .contact-list{ gap:6px; }
    .contact-list a, .copy-email{ display:inline-block; padding:8px 2px; }

    .toast{ max-width:calc(100vw - 32px); }
  }

  /* ================= SMALL PHONES : ≤380px ================= */
  @media (max-width: 380px){
    .hero{ padding:104px 5vw 32px; }
    .works{ padding:52px 5vw 60px; }
    .about-copy{ padding:28px 18px; }
    .about-copy h3{ font-size:1.2rem; }
    .about-copy p{ font-size:1rem; }
    .make-remember{ padding:60px 5vw 80px; }
    .site-footer{ padding:60px 5vw 36px; }
    .leaf img{ width:118px; }
    .footer-avatar{ width:112px; height:112px; }
    .contact-list li{ font-size:0.95rem; }
    .suhani-badge{ right:-6px; top:-22px; width:92px; height:46px; }
  }