/* =========================================================================
   THE SUEDE AGENCY — shared styles
   Boutique cafe-marketing agency. Editorial cream/charcoal + red accent,
   warm 70s grain. Tailwind handles layout/utility; this file holds the
   brand-specific pieces Tailwind can't express cleanly.
   ========================================================================= */

:root{
  --cream:#F4EDDD;
  --paper:#FBF7EE;
  --sand:#E7DAC1;
  --ink:#1C1815;
  --ash:#5A5249;
  --red:#E0281B;
  --red-dark:#BB1E12;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{background:var(--cream);color:var(--ink);overflow-x:hidden;}

::selection{background:var(--red);color:var(--cream);}

/* ---- Brand wordmark (recreated lockup) -------------------------------- */
/* Drop your real exported logo into assets/ and swap these for <img> if you
   want pixel-perfect; this CSS lockup keeps it crisp at any size meanwhile. */
.wordmark{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--red);}
.wordmark .wm-the,.wordmark .wm-agency{
  display:flex;align-items:center;gap:.5em;width:100%;
  font-family:"Hanken Grotesk",sans-serif;font-weight:700;
  font-size:.30em;letter-spacing:.55em;text-indent:.55em;text-transform:uppercase;
}
.wordmark .wm-the::before,.wordmark .wm-the::after,
.wordmark .wm-agency::before,.wordmark .wm-agency::after{
  content:"";flex:1;height:2px;background:currentColor;border-radius:2px;
}
.wordmark .wm-main{
  font-family:"Titan One",system-ui,sans-serif;font-weight:400;
  font-size:1em;letter-spacing:-.01em;margin:.12em 0;
}
.wordmark.is-light{color:var(--red);}
.wordmark.is-cream{color:var(--cream);}

/* compact inline lockup for the nav */
.brand-mark{font-family:"Titan One",sans-serif;color:var(--red);letter-spacing:-.01em;line-height:.9;}

/* ---- Film grain overlay ----------------------------------------------- */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:multiply;
}
.grain-fixed{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- Headlines -------------------------------------------------------- */
.display{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;line-height:.96;letter-spacing:-.02em;}
.display-italic{font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1;}
.kicker{font-family:"Hanken Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.28em;font-weight:700;font-size:.72rem;}

/* ---- Buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:"Hanken Grotesk",sans-serif;
  font-weight:600;border-radius:999px;padding:.95rem 1.6rem;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
  will-change:transform;}
.btn:active{transform:translateY(1px);}
.btn-red{background:var(--red);color:var(--cream);}
.btn-red:hover{background:var(--red-dark);}
.btn-ink{background:var(--ink);color:var(--cream);}
.btn-ink:hover{background:#000;}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(28,24,21,.25);}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--cream);}
.btn .arr{transition:transform .25s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}

/* ---- Links with animated underline ------------------------------------ */
.ulink{position:relative;color:inherit;}
.ulink::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);}
.ulink:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---- Marquee ---------------------------------------------------------- */
.marquee{display:flex;overflow:hidden;user-select:none;gap:0;}
.marquee__track{display:flex;flex-shrink:0;gap:0;animation:marquee 38s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ---- Scroll reveal ---------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
.reveal[data-d="4"]{transition-delay:.32s;}

/* ---- Hover-lift cards ------------------------------------------------- */
.lift{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(28,24,21,.35);}

/* ---- Marquee bar number counters -------------------------------------- */
.count{font-variant-numeric:tabular-nums;}

/* ---- Bar chart (reporting) -------------------------------------------- */
.bar{transform-origin:bottom;transform:scaleY(0);transition:transform 1.1s var(--ease);}
.bar.in{transform:scaleY(1);}

/* ---- Marquee divider rule -------------------------------------------- */
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(28,24,21,.18),transparent);}

/* ---- Sticky nav state ------------------------------------------------- */
.nav{transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);}
.nav.stuck{background:rgba(244,237,221,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(28,24,21,.08);}

/* ---- Image treatment -------------------------------------------------- */
.duo{filter:contrast(1.02) saturate(.96);}
.img-frame{position:relative;overflow:hidden;border-radius:18px;background:var(--sand);}
.img-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.img-frame:hover img{transform:scale(1.04);}

/* ---- Accordion -------------------------------------------------------- */
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease);}
.acc.open .acc-body{grid-template-rows:1fr;}
.acc-body>div{overflow:hidden;}
.acc-icon{transition:transform .4s var(--ease);}
.acc.open .acc-icon{transform:rotate(45deg);}

/* ---- Forms ------------------------------------------------------------ */
.field{width:100%;background:var(--paper);border:1.5px solid rgba(28,24,21,.16);border-radius:14px;
  padding:.95rem 1.1rem;font-family:"Hanken Grotesk",sans-serif;color:var(--ink);font-size:1rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);}
.field::placeholder{color:#9a9388;}
.field:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(224,40,27,.12);}

/* ---- Focus visibility (a11y) ----------------------------------------- */
a:focus-visible,button:focus-visible,.field:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--red);outline-offset:3px;border-radius:6px;}

/* =========================================================================
   PREMIUM MOTION LAYER
   ========================================================================= */

/* ---- Smooth scroll (Lenis) ------------------------------------------- */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}

/* ---- Intro loader ----------------------------------------------------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--cream);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2rem;transition:transform 1s cubic-bezier(.76,0,.24,1);}
.loader.done{transform:translateY(-100%);}
.loader__logo{width:min(60vw,420px);opacity:0;transform:translateY(14px);
  animation:loaderIn .9s var(--ease) .15s forwards;}
.loader__bar{width:min(60vw,420px);height:2px;background:rgba(28,24,21,.14);overflow:hidden;border-radius:2px;}
.loader__bar i{display:block;height:100%;width:0;background:var(--red);}
.loader__count{position:absolute;bottom:8vh;right:8vw;font-family:"Fraunces",serif;font-weight:600;
  font-size:clamp(3rem,12vw,9rem);line-height:1;color:var(--ink);opacity:.92;}
@keyframes loaderIn{to{opacity:1;transform:none;}}
body.loading{overflow:hidden;}

/* ---- Custom cursor ---------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  body{cursor:none;}
  a,button,.magnetic,[data-cursor],input,textarea,select,label{cursor:none;}
  .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:300;pointer-events:none;border-radius:999px;
    transform:translate(-50%,-50%);mix-blend-mode:difference;}
  .cursor-dot{width:7px;height:7px;background:#fff;}
  .cursor-ring{width:42px;height:42px;border:1.5px solid #fff;
    transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease);}
  .cursor-ring.active{width:74px;height:74px;background:rgba(255,255,255,.12);}
  .cursor-ring.hide{opacity:0;}
  .cursor-ring__label{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
    font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .25s;}
  .cursor-ring.labelled .cursor-ring__label{opacity:1;}
}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none !important;}}

/* ---- Magnetic ergonomics --------------------------------------------- */
.magnetic{transition:transform .4s var(--ease);}

/* ---- Editorial service list (hover-follow image) --------------------- */
.svc-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.4rem,3.4vw,2.6rem) 0;border-top:1px solid rgba(28,24,21,.16);
  transition:color .4s var(--ease),padding-left .5s var(--ease);}
.svc-row:last-child{border-bottom:1px solid rgba(28,24,21,.16);}
.svc-row .svc-index{font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:.8rem;color:var(--ash);
  transition:color .4s var(--ease);}
.svc-row .svc-name{font-family:"Fraunces",serif;font-weight:500;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2rem,6.5vw,4.6rem);transition:transform .5s var(--ease);}
.svc-row .svc-arrow{transition:transform .5s var(--ease),opacity .4s var(--ease);opacity:.3;}
@media (hover:hover){
  .svc-row:hover{color:var(--red);padding-left:1.2rem;}
  .svc-row:hover .svc-index{color:var(--red);}
  .svc-row:hover .svc-arrow{opacity:1;transform:translateX(8px) rotate(-45deg);}
}
.svc-float{position:fixed;top:0;left:0;z-index:40;width:min(30vw,340px);aspect-ratio:4/5;border-radius:14px;
  overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-4deg);
  transition:opacity .45s var(--ease),transform .45s var(--ease);box-shadow:0 40px 80px -30px rgba(28,24,21,.5);}
.svc-float.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg);}
.svc-float img{width:100%;height:100%;object-fit:cover;}

/* ---- Clip-mask line reveal ------------------------------------------- */
.mask{overflow:hidden;display:block;padding-bottom:.2em;margin-bottom:-.2em;}
.mask>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease);}
.mask.in>span{transform:translateY(0);}
.mask[data-d="1"]>span{transition-delay:.09s;}
.mask[data-d="2"]>span{transition-delay:.18s;}
.mask[data-d="3"]>span{transition-delay:.27s;}

/* ---- Scroll progress bar --------------------------------------------- */
.scrollprog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:70;
  transform-origin:left;will-change:width;pointer-events:none;}

/* ---- Scroll cue ------------------------------------------------------- */
.scrollcue{width:24px;height:38px;border:1.5px solid rgba(28,24,21,.35);border-radius:14px;position:relative;}
.scrollcue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:3px;
  background:var(--red);transform:translateX(-50%);animation:cue 1.6s var(--ease) infinite;}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0);}40%{opacity:1;}100%{opacity:0;transform:translate(-50%,12px);}}

/* ---- Kinetic marquee skew (set via JS) -------------------------------- */
.marquee__track{transition:transform .1s linear;}

/* ---- Tilt/parallax media --------------------------------------------- */
[data-parallax]{will-change:transform;}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
  .bar{transform:scaleY(1);}
  .mask>span{transform:none;}
  .loader{display:none;}
  body{cursor:auto !important;}
  .cursor-dot,.cursor-ring{display:none !important;}
}