:root{
  --bg:#f1efec;
  --bg-2:#e7e4df;
  --fg:#111110;
  --muted:#6f6a63;
  --accent:#e0a045;
  --accent-2:#1d928d;
  --line:rgba(17,17,16,0.12);
  --card:#ffffff;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--fg);font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;cursor:none;
  /* soft halo, in the page's own background colour, behind every piece of
     text - text-shadow inherits, so this reaches every heading/paragraph
     sitting on the plain page background without touching each one by
     hand. It keeps text crisp and readable even when the butterfly swarm
     (which sits just behind all content) happens to drift under a letter. */
  text-shadow:0 0 2px var(--bg),0 0 2px var(--bg),0 0 7px var(--bg),0 0 7px var(--bg);
}
/* dark panels (video/photo modals, the client project cards) are fully
   opaque - the canvas is already hidden behind them, so the cream halo
   would just look like an odd glow around light text. Switched back off. */
.modal, .modal *,
.project-card, .project-card *,
.video-slot, .cursor-label{
  text-shadow:none;
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:#0a0a0c;}
/* every real content section sits above the ambient butterfly canvas
   (z-index:1, fixed full-screen) so the swarm always reads as a background
   layer, never overlapping/obscuring text or images */
section{position:relative;padding:0 6vw;z-index:2;}

/* landing-only scroll lock - matches unseen.co's body:not(.is-touch){overflow-y:hidden} */
body.scroll-locked{overflow-y:hidden;height:100vh;height:100svh;overscroll-behavior-y:none;}

/* fixed, full-screen, and z-index:1 - strictly behind every content section
   (which are all z-index:2, see below), on every screen size including
   mobile, so the swarm can never sit on top of or obscure text while
   scrolling */
#petalCanvas{position:fixed;inset:0;z-index:1;pointer-events:none;}

/* custom cursor - Unseen-style circle that grows on hover */
.cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:1.4px solid var(--accent);pointer-events:none;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);transition:width .25s var(--ease-out),height .25s var(--ease-out),
    background-color .25s ease,opacity .2s ease,padding .2s ease,border-radius .2s ease;
}
.cursor.grow{width:64px;height:64px;background:rgba(224,160,69,.12);}
/* label mode - the circle morphs into a small text pill naming the link
   under the cursor, same idea as unseen.co's cursor-follow link labels */
.cursor-label{
  opacity:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:#0a0a0c;white-space:nowrap;transition:opacity .15s ease;
}
.cursor.label{
  width:auto;height:auto;padding:10px 18px;border-radius:999px;
  background:var(--accent);border-color:var(--accent);
}
.cursor.label .cursor-label{opacity:1;}
@media (max-width:860px){ .cursor{display:none;} body{cursor:auto;} *,a,button{cursor:auto !important;} }

/* nav */
nav{
  position:fixed;top:0;left:0;width:100%;z-index:300;display:flex;justify-content:space-between;
  align-items:center;padding:26px 5vw;
}
/* the logo is a real link back to Home on every page, so getting back
   never requires opening the slide-in menu */
.mark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;letter-spacing:.02em;
  transition:opacity .3s ease;}
.mark:hover{opacity:.7;}
.mark-badge{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--fg);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;
}
.mark-text{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.06em;}
.menu-btn{
  display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:9px 9px 9px 20px;cursor:none;color:var(--fg);font-family:var(--mono);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;transition:border-color .3s ease;
}
.menu-btn:hover{border-color:var(--accent);}
.menu-btn .dot{width:34px;height:34px;border-radius:50%;background:#111110;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;}
.menu-btn .dot span, .menu-btn .dot span::before, .menu-btn .dot span::after{
  display:block;width:12px;height:1.4px;background:#fff;position:relative;
}
.menu-btn .dot span::before, .menu-btn .dot span::after{content:'';position:absolute;left:0;}
.menu-btn .dot span::before{top:-4px;} .menu-btn .dot span::after{top:4px;}

/* full-screen slide-in menu */
.menu-overlay{position:fixed;inset:0;z-index:9000;pointer-events:none;}
/* dimmed backdrop behind the panel - fades in with the panel's own slide-in,
   and doubles as an obvious "click here to dismiss" affordance. Before this,
   the overlay had no visible backdrop at all, so clicking anywhere outside
   the narrow panel silently did nothing (the invisible full-screen overlay
   was still capturing/swallowing the click) instead of closing the menu -
   the only way out was picking an actual nav link. */
.menu-overlay::before{
  content:'';position:absolute;inset:0;background:rgba(10,9,8,.35);
  opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none;
}
.menu-overlay.open::before{opacity:1;}
.menu-panel{
  position:absolute;top:0;right:0;bottom:0;width:100%;max-width:520px;
  background:var(--card);transform:translateX(100%);transition:transform .7s var(--ease-out);
  padding:110px 48px 48px;display:flex;flex-direction:column;justify-content:space-between;
}
.menu-overlay.open{pointer-events:auto;}
.menu-overlay.open .menu-panel{transform:translateX(0);}
.menu-close{
  position:absolute;top:26px;right:5vw;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--fg);cursor:none;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}
.menu-nav{display:flex;flex-direction:column;gap:6px;}
.menu-nav a{
  display:flex;align-items:baseline;gap:16px;font-family:'Playfair Display',serif;font-style:italic;
  font-size:clamp(2.4rem,6vw,3.6rem);color:var(--fg);padding:10px 0;border-bottom:1px solid transparent;
  transition:color .35s ease,border-color .35s ease,padding-left .35s var(--ease-out);
}
.menu-nav a span.num{font-family:var(--mono);font-style:normal;font-size:.8rem;color:var(--muted);}
.menu-nav a:hover,.menu-nav a.current{color:var(--accent);padding-left:14px;border-color:var(--line);}
.menu-footer{display:flex;gap:22px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);}
.menu-footer a:hover{color:var(--accent);}

/* cross-page wipe transition */
.wipe{
  position:fixed;inset:0;background:var(--bg);z-index:9999;transform:translateY(101%);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  transition:transform .6s var(--ease-out);
}
.wipe.show{transform:translateY(0);}
.wipe.hide{transform:translateY(-101%);}

/* pill CTA button */
.pill-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;
  border:1px solid var(--fg);border-radius:999px;padding:14px 26px;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;cursor:none;white-space:nowrap;
  transition:border-color .4s ease;
}
/* .txt is a flex item with overflow:hidden, which by the CSS flexbox spec
   makes its automatic min-width 0 instead of content-based ("flexbug #1") -
   that let long labels (like "Explore S World") get squeezed and wrap
   inside the 1em-tall clipped box, chopping the second line off. Locking
   both the button and the label itself to a single line fixes it for any
   label length. */
.pill-btn .txt{position:relative;display:inline-block;height:1em;overflow:hidden;flex:none;}
.pill-btn .txt span{display:block;white-space:nowrap;transition:transform .5s var(--ease-out);}
.pill-btn .txt span.clone{position:absolute;top:0;left:0;transform:translateY(120%);color:#0a0a0c;}
.pill-btn .arrow{transition:transform .5s var(--ease-out);}
.pill-btn::before{
  content:'';position:absolute;inset:0;border-radius:999px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out);z-index:-1;
}
.pill-btn:hover::before{transform:scaleX(1);}
.pill-btn:hover{border-color:var(--accent);}
.pill-btn:hover .txt span:not(.clone){transform:translateY(-120%);}
.pill-btn:hover .txt span.clone{transform:translateY(0);}
.pill-btn:hover .arrow{transform:translateX(4px);}
.pill-btn.solid{background:var(--accent);color:#0a0a0c;border-color:var(--accent);}
.pill-btn.solid .txt span.clone{color:var(--fg);}
.pill-btn.solid::before{background:transparent;}
.pill-btn.small{padding:9px 18px;font-size:.66rem;}

/* ============ HERO (home page only) ============ */
.hero{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;text-align:center;overflow:hidden;
  /* reserves room for the fixed, bottom-pinned .hero-marquee bar so the
     centred content above it (in particular the CTA button) never lands
     underneath it - .hero-a-inner and .hero-marquee share z-index:1, so
     without this clearance the marquee (later in the DOM) can paint over
     and half-hide the button on shorter viewports, which read as "barely
     visible / cropped" */
  padding-bottom:132px;
}
/* soft colour bloom behind the S monogram - heavily blurred and masked so
   it reads as ambient glow rather than a hard-edged photo, blending into
   the cream page background on every side instead of sitting on top of it */
.hero-bg{
  position:absolute;inset:-12%;z-index:-1;pointer-events:none;
  background:url('https://thesawyeredit.com/images/hero-glow-bg.jpg') center 55%/cover no-repeat;
  opacity:.5;filter:blur(42px) saturate(1.2);
  -webkit-mask-image:radial-gradient(ellipse 52% 48% at 50% 47%, #000 0%, #000 30%, transparent 68%);
  mask-image:radial-gradient(ellipse 52% 48% at 50% 47%, #000 0%, #000 30%, transparent 68%);
}
@media (max-width:640px){
  .hero-bg{opacity:.4;}
}
.hero-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(50vw,48vh);height:min(50vw,48vh);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(224,160,69,.11), transparent 70%);filter:blur(28px);
}
.hero-s-stage{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;
  width:min(40vw,46vh);max-width:360px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  perspective:1100px;cursor:none;touch-action:none;
}
/* the video's black background AND its bottom floor-shadow are keyed out
   per-pixel in JS (real alpha, not a CSS blend mode - mix-blend-mode only
   composites within its own stacking context, and this element sits inside
   a transformed/z-indexed parent that isolates one, so blending couldn't
   reach the page background behind it and just showed a black box). Sized
   to the source video's own aspect ratio so it isn't stretched to fill the
   square stage */
.hero-s-canvas{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:100%;width:auto;aspect-ratio:640/796;max-width:100%;
  display:block;touch-action:none;
}
.hero-s-stage::before{
  content:'';position:absolute;inset:-10%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle, rgba(255,120,90,.20) 0%, rgba(230,60,150,.14) 32%, rgba(70,110,230,.12) 58%, transparent 75%);
  filter:blur(30px);
}
.hero-s-face{position:relative;width:88%;aspect-ratio:943/1173;margin:0 auto;
  filter:drop-shadow(0 -2px 0 rgba(255,255,255,.10)) drop-shadow(0 3px 2px rgba(0,0,0,.35))
    drop-shadow(0 22px 38px rgba(0,0,0,.55)) drop-shadow(0 0 44px rgba(230,90,140,.18)) contrast(1.06) saturate(1.05);
  transform-style:preserve-3d;will-change:transform;}
/* this element rotates every single frame (idle wobble, even when nobody's
   touching it), so its filter gets recomputed continuously - four stacked
   drop-shadows is fine on desktop GPUs but noticeably heavy on phones.
   Mobile gets one cheaper shadow instead, for a smoother constant frame rate. */
@media (max-width:860px){
  .hero-s-face{filter:drop-shadow(0 14px 24px rgba(0,0,0,.45)) saturate(1.05);}
}
.hero-s-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;display:block;}
.hero-s-sheen{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:url('https://thesawyeredit.com/images/s-original.png');mask-image:url('https://thesawyeredit.com/images/s-original.png');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:conic-gradient(from var(--sheen-ang,0deg) at 50% 50%, #e0a045, #c9705a, #8b50b1, #1d928d, #e0a045);
  mix-blend-mode:color;opacity:.6;}
.hero-a-top{
  position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero-a-eyebrow-top{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;margin-bottom:10px;
}
.hero-a-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  margin-top:min(34vw,40vh,360px);}
.hero-a-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5.6vw,3.4rem);letter-spacing:.02em;
  line-height:1;white-space:nowrap;}
.hero-a-title em{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent);}
.drag-hint{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);opacity:.6;margin-top:14px;}
@media (max-width:640px){
  .hero-a-top{top:82px;}
  .hero-a-eyebrow-top{font-size:.62rem;}
  .hero-a-title{font-size:clamp(1.5rem,7vw,2.2rem);}
}

/* ============ S WORLD (Work page) - a true 3D scene (Three.js), confined to
   a single full-viewport hero block (.world-hero) at the top of the page -
   a faint wireframe sphere, the S monogram at the core, and three client
   tiles (AMANO/Aubaine/Pub Portfolio) orbiting it. Drag anywhere in the hero
   to spin it, same idle-wander/inertia feel as the Home hero's S. Keeping
   the scene inside a fixed-height, overflow:hidden container (rather than
   position:fixed on the canvas itself) means it scrolls away naturally once
   you pass the hero, instead of staying pinned behind every section on the
   page and bleeding through their empty space. Clicking a tile reveals that
   client's full project card via .client-reveal-overlay below. */
/* z-index:2 (not auto) makes this its own stacking context, same convention
   as every other content <section> on the site - without it, the fixed
   ambient butterfly canvas (z-index:1) was painting on top of the 3D scene
   and client tiles inside here instead of staying strictly behind them */
.world-hero{position:relative;height:100vh;height:100svh;overflow:hidden;z-index:2;}
/* touch-action:none stops mobile browsers treating a drag-to-spin gesture
   here as a page-scroll attempt, which is what made rotating the scene feel
   sticky/fighty on phones */
#worldCanvas{position:absolute;inset:0;z-index:0;touch-action:none;}
/* the S monogram video sits centered over the sphere scene (dead center of
   the orbit, same spot the old 3D monogram occupied) - pointer-events:none
   so dragging still hits the canvas underneath for the tile-orbit rotation.
   It's drawn frame-by-frame onto this canvas so the black background and
   the clip's own bottom floor-shadow can be keyed out per-pixel in JS (real
   alpha - mix-blend-mode was tried first but can't see past this element's
   own isolated stacking context to the real page background behind it) */
.world-s-video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  height:min(30vw,34vh);max-height:280px;width:auto;aspect-ratio:760/946;
  pointer-events:none;
}
.world-scene-hint{
  position:absolute;bottom:30px;left:0;right:0;z-index:2;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);opacity:.75;
}
/* floating name tag that follows whichever client tile is hovered, so it's
   obvious which client each tile represents before you click it */
.world-tile-label{
  position:fixed;z-index:5;pointer-events:none;transform:translate(-50%,-150%);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:#f5f4f2;background:rgba(10,9,8,.8);padding:7px 14px;border-radius:999px;
  border:1px solid rgba(224,160,69,.55);white-space:nowrap;opacity:0;
  transition:opacity .2s ease;
}
.world-tile-label.show{opacity:1;}

.client-reveal-overlay{
  position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:6vh 6vw;background:rgba(12,11,10,.72);backdrop-filter:blur(10px);
}
.client-reveal-overlay.open{display:flex;}
.client-reveal-overlay .project-card{display:none;max-width:420px;width:100%;max-height:84vh;overflow-y:auto;}
.client-reveal-overlay .project-card.active{display:flex;}
.client-reveal-close{
  position:absolute;top:26px;right:5vw;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(245,244,242,.3);background:transparent;color:#f5f4f2;font-size:1rem;
  cursor:none;display:flex;align-items:center;justify-content:center;
}
.client-reveal-close:hover{background:var(--accent);color:#0a0a0c;border-color:var(--accent);}

/* venues ticker pinned inside the hero viewport, so it's visible without scrolling */
.hero-marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  border-top:1px solid var(--line);padding:22px 0 26px;overflow:hidden;background:rgba(241,239,236,.6);
  backdrop-filter:blur(6px);
}
.hero-marquee-label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-bottom:14px;
}
.hero-marquee-track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:marqueeScroll 26s linear infinite;}
.hero-marquee:hover .hero-marquee-track{animation-play-state:paused;}
.hero-marquee-track span{
  font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:500;color:var(--muted);
  display:flex;align-items:center;gap:12px;
}
.hero-marquee-track span::after{content:'✦';color:var(--accent);font-size:.8rem;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:640px){.hero-marquee{padding:16px 0 20px;} .hero{padding-bottom:104px;}}

/* ============ PAGE HEADER (work / about / contact) ============ */
.page-head{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;
  padding:150px 0 50px;border-bottom:1px solid var(--line);
  /* text-only (no links/buttons inside on any page) - stays click-through so
     it never steals drag/click gestures meant for the 3D scene behind it */
  pointer-events:none;
}
.page-head h1{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.4rem);line-height:.95;}
.page-head h1 em{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent);
  text-transform:none;font-weight:400;}
.page-head p{max-width:320px;font-size:.9rem;color:var(--muted);line-height:1.6;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:70px 0 40px;border-bottom:1px solid var(--line);gap:20px;flex-wrap:wrap;
}
.section-head h2{font-size:clamp(1.8rem,4.4vw,2.8rem);font-weight:600;letter-spacing:-.01em;}
.section-head p{max-width:320px;color:var(--muted);font-size:.92rem;line-height:1.6;}

/* reveal utility */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ============ WORK / PROJECT SECTION - wavy hover ============ */
.work-section{padding:60px 0 100px;}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,260px));gap:22px;margin-top:16px;justify-content:center;}
.project-card{
  position:relative;border-radius:16px;overflow:hidden;cursor:none;
  background:linear-gradient(155deg,#1b1815,#100e0c);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease-out);
}
.project-card:hover{transform:translateY(-4px);}
/* client mark sits in its own fixed-height panel instead of a stretched cover
   photo - real logos (or, for the multi-venue pub card, a typographic mark),
   centred and left undistorted. The text panel below is normal document
   flow (not overlaid on top of the logo), so however much copy a card has,
   it just pushes the card taller instead of colliding with the mark above it */
.project-card-logo{
  flex:0 0 auto;height:130px;display:flex;align-items:center;justify-content:center;
  padding:18px 12%;border-bottom:1px solid rgba(245,244,242,.08);
}
.project-card-logo img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
  transition:transform .5s var(--ease-out);
}
.project-card:hover .project-card-logo img{transform:scale(1.07);}
.project-card-wordmark{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  transition:transform .5s var(--ease-out);
}
.project-card:hover .project-card-wordmark{transform:scale(1.05);}
.project-card-wordmark span{
  font-family:'Playfair Display',serif;font-style:italic;color:#f5f4f2;
  font-size:.86rem;line-height:1.25;
}
.project-card-wordmark small{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  margin-bottom:2px;
}
.project-card-content{flex:1 1 auto;padding:16px;}
.project-card-tag{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px;display:block;}
.project-card-name{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.25rem);line-height:1;margin-bottom:4px;color:#f5f4f2;}
.project-card-dates{font-family:var(--mono);font-size:.56rem;color:rgba(245,244,242,.65);margin-bottom:6px;}
.project-card-desc{font-family:'Playfair Display',serif;font-style:italic;font-size:.74rem;
  line-height:1.4;color:#cfccc6;max-width:96%;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.project-card-result{
  display:inline-flex;align-items:center;gap:5px;width:fit-content;
  border:1px solid var(--accent);border-radius:999px;padding:3px 10px;
  font-size:.6rem;color:#f5f4f2;margin-bottom:10px;
}
.project-card-result b{font-family:'Space Grotesk',sans-serif;color:var(--accent);}
.project-card-actions{display:flex;gap:7px;flex-wrap:wrap;position:relative;z-index:3;}
.pcard-btn{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.03em;text-transform:uppercase;
  color:#0a0a0c;background:var(--accent);border:1px solid var(--accent);border-radius:999px;
  padding:6px 12px;cursor:none;transition:background .3s ease,color .3s ease;
}
.pcard-btn.ghost{background:transparent;color:#f5f4f2;border-color:rgba(245,244,242,.4);}
.pcard-btn:hover{background:#f5f4f2;border-color:#f5f4f2;color:#0a0a0c;}

.work-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;position:relative;z-index:3;}
.work-links a{font-family:var(--mono);font-size:.58rem;color:#f5f4f2;text-decoration:underline;text-underline-offset:3px;}

.work-footer{position:relative;z-index:2;margin-top:60px;display:flex;justify-content:center;}

/* fixed footer status pill */
.footer-cta{
  position:fixed;left:6vw;bottom:26px;z-index:250;display:flex;align-items:center;gap:12px;
}
.footer-cta-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 0 4px rgba(29,146,141,.18);}
.footer-cta span{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);}
@media (max-width:640px){.footer-cta{display:none;}}

/* ============ ABOUT / BIO ============ */
.bio{padding-bottom:90px;}
.bio-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;padding-top:50px;align-items:start;}
@media (max-width:800px){.bio-grid{grid-template-columns:1fr;}}
.bio-grid .lead{font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.5;font-weight:500;letter-spacing:-.01em;}
.bio-grid .lead .hl{color:var(--accent);}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:32px;}
.stat{background:var(--bg);padding:20px;}
.stat .n{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;color:var(--accent);}
.stat .l{font-size:.78rem;color:var(--muted);margin-top:4px;}
.organic-note{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-top:14px;line-height:1.6;letter-spacing:.01em;}
.bio-side{color:var(--muted);font-size:.95rem;line-height:1.75;}
.bio-side strong{color:var(--fg);font-weight:600;}

.creator-bubble-wrap,.ig-bubble-wrap{
  flex:0 0 auto;width:172px;height:172px;border-radius:50%;padding:4px;
  animation:bubbleFloat 6s ease-in-out infinite;
}
.creator-bubble-wrap{background:conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));}
.ig-bubble-wrap{
  display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;
  background:conic-gradient(from 0deg, #e0a045, #c9705a, #8b50b1, #1d928d, #e0a045);
  transition:transform .4s var(--ease-out);
}
.ig-bubble-wrap:hover{transform:scale(1.06);}
.creator-bubble,.ig-bubble{
  width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;
  background:var(--card);box-shadow:0 12px 34px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.04);
  display:flex;align-items:center;justify-content:center;
}
.ig-bubble svg{width:42%;height:42%;}
.creator-track{display:flex;width:500%;height:100%;animation:bubbleSlide 20s infinite ease-in-out;}
.creator-bubble:hover .creator-track{animation-play-state:paused;}
.creator-track img{flex:0 0 20%;width:20%;height:100%;object-fit:cover;display:block;}
@keyframes bubbleFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes bubbleSlide{
  0%,16%{transform:translateX(0%);} 20%,36%{transform:translateX(-20%);}
  40%,56%{transform:translateX(-40%);} 60%,76%{transform:translateX(-60%);}
  80%,96%{transform:translateX(-80%);} 100%{transform:translateX(0%);}
}
@media (max-width:640px){.creator-bubble-wrap,.ig-bubble-wrap{width:150px;height:150px;}}
.journey{margin-top:52px;padding-top:38px;border-top:1px solid var(--line);}
.journey-label{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.journey-text{color:var(--fg);font-size:1rem;line-height:1.85;max-width:820px;}
.journey-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.journey-chips span{font-family:var(--mono);border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:.7rem;color:var(--muted);letter-spacing:.02em;}
.journey-bubble{margin-top:36px;display:flex;justify-content:center;gap:38px;flex-wrap:wrap;}
.journey-bubble-item{display:flex;flex-direction:column;align-items:center;gap:10px;}
.journey-bubble-caption{font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:center;}

/* MISSION / VISION */
.mission{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-top:70px;padding-bottom:80px;border-top:1px solid var(--line);
}
.mission-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;}
.mission-statement{
  font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.4rem,3.6vw,2.5rem);line-height:1.25;max-width:760px;
}
.mission-statement .hl{color:var(--accent);}
.vision-statement{margin-top:26px;max-width:480px;color:var(--muted);font-size:.92rem;line-height:1.6;font-style:italic;}

/* SERVICES */
.services{padding-top:20px;padding-bottom:40px;}
.service-panel{display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line);}
@media (max-width:700px){.service-panel{grid-template-columns:36px 1fr;gap:16px;}}
.service-visual{font-family:var(--mono);font-size:.85rem;color:var(--muted);padding-top:4px;}
.service-copy .s-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.service-copy h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:700;letter-spacing:-.01em;margin-bottom:10px;}
.service-copy p{color:var(--muted);font-size:.9rem;line-height:1.7;max-width:520px;}
.skills{margin-top:36px;}

/* APPROACH */
.approach{padding-bottom:100px;}
.approach-list{display:grid;gap:0;padding-top:20px;}
.a-row{display:grid;grid-template-columns:60px 1fr 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:center;}
@media (max-width:700px){.a-row{grid-template-columns:40px 1fr;}.a-row .a-desc{grid-column:2;}}
.a-row .a-idx{color:var(--muted);font-family:'Space Grotesk',sans-serif;}
.a-row .a-title{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:600;}
.a-row .a-desc{color:var(--muted);font-size:.88rem;line-height:1.6;}

/* CTA / FOOTER (contact page) */
.cta{
  min-height:64vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding-top:150px;position:relative;
}
.cta h2{font-size:clamp(2.2rem,7vw,5rem);font-weight:700;letter-spacing:-.02em;line-height:1.02;}
.cta h2 .hl{color:var(--accent);}
.cta-sub{margin-top:18px;max-width:460px;color:var(--muted);font-size:1rem;line-height:1.6;}
.cta-link{
  margin-top:36px;display:inline-flex;align-items:center;gap:16px;
  font-size:1.1rem;font-weight:600;color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--fg);padding-bottom:6px;
}
.cta-link:hover{color:var(--accent);border-color:var(--accent);}
footer{
  position:relative;z-index:2;
  padding:34px 6vw 44px;display:flex;flex-direction:column;gap:24px;
  color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);
}
.footer-tools-label{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.footer-tools-chips{display:flex;flex-wrap:wrap;gap:9px;}
.footer-tools-chips span{
  font-family:var(--mono);border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  font-size:.68rem;color:var(--muted);letter-spacing:.02em;transition:border-color .3s ease,color .3s ease;
}
.footer-tools-chips span:hover{border-color:var(--accent);color:var(--accent);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;}

/* MODAL */
.modal-overlay{
  position:fixed;inset:0;z-index:9996;background:rgba(3,3,4,.94);backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;padding:5vh 5vw;
}
.modal-overlay.open{display:flex;}
.modal{
  background:radial-gradient(circle at 30% 0%, rgba(224,160,69,.10), transparent 55%), #17140f;
  border:1px solid rgba(224,160,69,.18);border-radius:20px;color:#f3f2ee;
  max-width:1040px;width:100%;max-height:88vh;overflow-y:auto;padding:38px;position:relative;
}
@media (max-width:640px){
  .modal-overlay{padding:0;}
  .modal{max-height:100vh;height:100%;border-radius:0;padding:22px 16px;}
}
.modal-close{
  position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;
  background:transparent;border:1px solid rgba(243,242,238,.2);color:#f3f2ee;font-size:1rem;cursor:pointer;
}
.modal-close:hover{background:var(--accent);color:#0a0a0c;border-color:var(--accent);}
.modal-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#a89f92;}
.modal-head h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-top:8px;}
.modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:18px;margin-top:28px;}
.video-card{
  position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:#0b0b0d;border:1px solid rgba(224,160,69,.18);
  box-shadow:0 16px 32px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  transition:transform .45s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.video-card::before,.video-card::after{content:'';position:absolute;width:15px;height:15px;pointer-events:none;z-index:2;transition:border-color .4s ease;}
.video-card::before{top:9px;left:9px;border-top:1.4px solid rgba(224,160,69,0);border-left:1.4px solid rgba(224,160,69,0);border-radius:3px 0 0 0;}
.video-card::after{bottom:9px;right:9px;border-bottom:1.4px solid rgba(224,160,69,0);border-right:1.4px solid rgba(224,160,69,0);border-radius:0 0 3px 0;}
.video-card:hover{transform:translateY(-6px);border-color:rgba(224,160,69,.5);box-shadow:0 26px 46px rgba(0,0,0,.6), 0 0 0 1px rgba(224,160,69,.14);}
.video-card:hover::before,.video-card:hover::after{border-color:var(--accent);}
.video-card .phone-poster,.video-card .modal-video,.video-card .video-slot{width:100%;height:100%;}
.video-slot{
  background:linear-gradient(160deg,#141416,#0b0b0d);display:flex;align-items:center;justify-content:center;color:#a89f92;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:14px;line-height:1.4;
}
.phone-poster{position:relative;cursor:pointer;background:#000;}
.phone-poster img{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
.phone-poster-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(6,6,7,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;
  border:1.4px solid rgba(224,160,69,.8);transition:transform .35s var(--ease-out), background .3s ease;
}
.video-card:hover .phone-poster-play{transform:translate(-50%,-50%) scale(1.08);background:var(--accent);}
.video-card:hover .phone-poster-play::before{border-color:transparent transparent transparent #0a0a0c;}
.phone-poster-play::before{
  content:'';width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent var(--accent);margin-left:3px;transition:border-color .3s ease;
}
/* featured-campaign overlay - name + result pill shown on a handful of
   proven AMANO videos (see CAMPAIGN_HIGHLIGHTS in world.html), so they read
   as case studies rather than plain thumbnails in the gallery */
.result-shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%);
}
.result-tag{position:absolute;left:9px;right:9px;bottom:9px;z-index:3;pointer-events:none;}
.result-tag .r-name{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.01em;color:#f5f4f2;margin-bottom:5px;text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.result-tag .r-pill{
  display:inline-block;border:1px solid var(--accent);border-radius:999px;padding:3px 9px;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.02em;text-transform:uppercase;
  color:#f5f4f2;background:rgba(10,9,8,.6);backdrop-filter:blur(2px);
}
.result-tag .r-pill b{font-family:'Space Grotesk',sans-serif;color:var(--accent);font-weight:600;}
.modal-video{width:100%;height:100%;object-fit:contain;background:#000;display:block;}
.modal-venues{display:flex;flex-direction:column;gap:18px;margin-top:20px;}
.modal-venue-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.8rem;color:var(--accent);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(243,242,238,.12);}
.modal-venue .modal-grid{margin-top:0;}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:28px;}
.photo-item{display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid rgba(243,242,238,.12);background:#0b0b0d;transition:transform .35s var(--ease-out);}
.photo-item:hover,.photo-item:focus-visible{transform:scale(1.03);outline:2px solid var(--accent);outline-offset:2px;}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block;}