/* ==========================================================================
   KNOW ME — production stylesheet
   Brand tokens: #F4F0EA / #111111 / #F06A2F / #FDCB93 / #FFFFFF
   Fonts: Sora (display) + Inter (body) + IBM Plex Mono (labels)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#F4F0EA; --paper-deep:#EAE3D8; --white:#FFFFFF;
  --ink:#111111; --ink-soft:rgba(17,17,17,.62); --ink-faint:rgba(17,17,17,.42);
  --accent:#F06A2F; --accent-soft:#FDCB93;
  --line:rgba(17,17,17,.14); --line-soft:rgba(17,17,17,.08);
  --display:'Sora','Neue Montreal',-apple-system,sans-serif;
  --body:'Inter',-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gutter:clamp(20px,5vw,56px); --maxw:1200px; --ease:cubic-bezier(.16,.8,.24,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
::selection{background:var(--accent);color:var(--white);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

/* skip link — accessibility */
.skip-link{position:absolute;left:-999px;top:auto;background:var(--ink);color:var(--paper);padding:12px 20px;z-index:1000;font-family:var(--mono);font-size:13px;border-radius:0 0 4px 0;}
.skip-link:focus{left:0;top:0;}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);display:inline-block;}
.display-1{font-family:var(--display);font-weight:600;font-size:clamp(2.3rem,6vw,5.6rem);line-height:.98;letter-spacing:-.01em;}
.display-2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.03;letter-spacing:-.01em;}
.display-3{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2vw,1.8rem); line-height:1.2;}.italic{font-style:normal;font-weight:600;color:var(--accent);}
.lede{font-size:clamp(1.02rem,1.5vw,1.25rem);line-height:1.55;color:var(--ink-soft);max-width:46ch;}
.body-l{font-size:1.05rem;line-height:1.65;color:var(--ink-soft);max-width:56ch;}
.body-m{font-size:.98rem;line-height:1.7;color:var(--ink-soft);max-width:52ch;}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}

.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:15px 24px;border-radius:100px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);transition:background .35s var(--ease),transform .35s var(--ease);}
.btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--paper);}
.btn svg{width:13px;height:13px;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translate(3px,-3px);}
.text-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid var(--ink);border-top:none;border-left:none;border-right:none;background:none;cursor:pointer;color:var(--ink);transition:color .3s var(--ease),gap .3s var(--ease);}
.text-link:hover{color:var(--accent);border-color:var(--accent);gap:12px;}

/* ---------- nav ---------- */
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);background:rgba(244,240,234,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);}
.logo{font-family:var(--display);font-weight:600;font-size:1.1rem;display:flex;align-items:baseline;gap:6px;color:var(--ink);}
.logo .dot{color:var(--accent);font-size:.7em;}
.nav-desktop{display:flex;align-items:center;gap:32px;}
.nav-desktop a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:none;border:none;padding:4px 0;color:var(--ink-soft);position:relative;transition:color .3s var(--ease);}
.nav-desktop a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);transition:right .35s var(--ease);}
.nav-desktop a:hover,.nav-desktop a[aria-current="page"]{color:var(--accent);}
.nav-desktop a:hover::after,.nav-desktop a[aria-current="page"]::after{right:0;}
.nav-right{display:flex;align-items:center;gap:24px;}
.nav-toggle{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--ink);background:transparent;position:relative;}
.nav-toggle span{position:absolute;left:12px;right:12px;height:1px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s var(--ease);}
.nav-toggle span:nth-child(1){top:16px;} .nav-toggle span:nth-child(2){top:21px;} .nav-toggle span:nth-child(3){top:26px;}
.nav-toggle.open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
.nav-mobile{position:fixed;inset:0;top:65px;z-index:99;background:var(--ink);color:var(--paper);display:none;flex-direction:column;justify-content:center;padding:var(--gutter);}
.nav-mobile.open{display:flex;}
.nav-mobile a{font-family:var(--display);font-size:2rem;font-weight:600;padding:12px 0;border-bottom:1px solid rgba(244,240,234,.15);display:block;color:var(--paper);}
@media (max-width:900px){ .nav-desktop,.nav-right .btn{display:none;} .nav-toggle{display:block;} }

/* ---------- layout ---------- */
section{position:relative;}
.section{padding:clamp(56px,10vw,120px) 0;}
.section-tight{padding:clamp(32px,5vw,64px) 0;}
.section-mini{padding:clamp(20px,3vw,36px) 0;}
.divider{border-top:1px solid var(--line);}
.grid{display:grid;gap:var(--gutter);grid-template-columns:repeat(12,1fr);}
@media (max-width:900px){ .grid{grid-template-columns:repeat(4,1fr);} .grid>*{grid-column:1/-1 !important;} }

/* ---------- full-screen hero ---------- */
.hero-full{height:100svh;min-height:560px;position:relative;overflow:hidden;margin-top:-71px;padding-top:71px;}
.hero-full .media{position:absolute;inset:0;border-radius:0;border:0;height:100%;}
.hero-full video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) clamp(28px,5vw,56px);z-index:2;}
.hero-word{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:.86;font-size:clamp(3.4rem,13vw,10rem);color:var(--paper);}
.hero-word.accent{color:var(--accent);}
.hero-foot{position:absolute;left:0;right:0;top:calc(71px + clamp(16px,3vw,28px));padding:0 var(--gutter);z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.hero-foot .eyebrow{color:rgba(244,240,234,.85);}
.hero-foot .eyebrow::before{background:var(--accent);}
.scroll-cue{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,240,234,.7);display:flex;align-items:center;gap:8px;}
.scroll-cue .bar{width:1px;height:26px;background:rgba(244,240,234,.5);position:relative;overflow:hidden;}
.scroll-cue .bar::after{content:'';position:absolute;top:-100%;left:0;right:0;height:100%;background:var(--accent);animation:scrollcue 1.8s var(--ease) infinite;}
@keyframes scrollcue{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}

/* ---------- media placeholders (swap for real photography/video when available) ---------- */
.media{position:relative;overflow:hidden;border-radius:2px;background:var(--white);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;}
.media.tone-accent{background:var(--white);border:1px solid var(--accent);}
.media.tone-ink{background:var(--ink);border:1px solid var(--ink);}
.media .ph-label{font-family:var(--mono);font-size:clamp(11px,1.1vw,13px);letter-spacing:.04em;color:var(--ink-faint);text-align:center;padding:16px;}
.media.tone-ink .ph-label{color:rgba(244,240,234,.6);}
.media.tone-accent .ph-label{color:var(--accent);}
.media.ratio-square{aspect-ratio:1/1;} .media.ratio-portrait{aspect-ratio:4/5;} .media.ratio-wide{aspect-ratio:16/9;}
.media.ratio-hero{aspect-ratio:5/6;} .media.ratio-cinema{aspect-ratio:21/9;} .media.ratio-tall{aspect-ratio:3/4;}

/* ---------- scroll reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].in{opacity:1;transform:translateY(0);}
[data-reveal-group] [data-reveal]{transition-delay:var(--d,0ms);}

.card{border-top:1px solid var(--line);padding-top:24px;}
.seq-num{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.05em;}

.pull-quote{text-align:center;}
.pull-quote p{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.2;letter-spacing:-.01em;max-width:18ch;margin:0 auto;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--paper);padding:clamp(48px,7vw,88px) 0 28px;}
.site-footer a,.site-footer button{color:var(--paper);}
.footer-cta{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:48px;border-bottom:1px solid rgba(244,240,234,.14);margin-bottom:32px;}
.footer-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.footer-col .label{color:rgba(244,240,234,.45);margin-bottom:12px;display:block;}
.footer-col a,.footer-col p{font-size:14px;color:rgba(244,240,234,.82);display:block;margin-bottom:7px;}
.footer-col a:hover{color:var(--accent-soft);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:40px;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,240,234,.4);}

/* ---------- case studies ---------- */
.case-meta{display:flex;flex-wrap:wrap;gap:36px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.case-meta .item .label{margin-bottom:6px;display:block;}
.case-meta .item p{font-size:14px;}
.quote-block{border-left:2px solid var(--accent);padding-left:24px;}
.quote-block p{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.35;color:var(--ink);}
.quote-block cite{display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.case-pagination{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 0;}
.case-pagination a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:flex;flex-direction:column;gap:6px;color:var(--ink);}
.case-pagination a span:first-child{color:var(--ink-faint);}
.case-pagination a span:last-child{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:0;text-transform:none;}
.case-pagination a.next{align-items:flex-end;text-align:right;}
.case-pagination a:hover span:last-child{color:var(--accent);}
.case-section{padding:clamp(48px,8vw,96px) 0;}

/* ---------- contact form ---------- */
.field{position:relative;margin-bottom:26px;}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 2px;font-family:var(--body);font-size:1rem;color:var(--ink);resize:vertical;transition:border-color .3s var(--ease);}
.field textarea{min-height:100px;}
.field input:focus,.field textarea:focus{border-color:var(--ink);outline:none;}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:8px;}
.form-status{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);margin-top:16px;display:none;}
.form-status.show{display:block;}

/* ---------- utilities ---------- */
.mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:40px;} .mt-64{margin-top:48px;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-16{gap:16px;} .gap-24{gap:24px;}
.hide-mobile{}
@media(max-width:700px){ .hide-mobile{display:none;} .hero-word{font-size:clamp(2.6rem,15vw,4rem);} }
.arrow{width:13px;height:13px;}

/* ---------- premium motion: hero cinematic zoom + text reveal ---------- */
.hero-full .media{animation:heroZoom 25s ease-out forwards;}
@keyframes heroZoom{from{transform:scale(1.12);}to{transform:scale(1);}}
.hero-mask{overflow:hidden;}
.hero-word-inner{display:block;transform:translateY(115%);animation:heroWordIn 1.1s cubic-bezier(.16,.8,.24,1) forwards;animation-delay:.15s;}
.hero-word.accent .hero-word-inner{animation-delay:.32s;}
@keyframes heroWordIn{to{transform:translateY(0);}}

/* eyebrow: line draws in on reveal instead of sitting there static */
.eyebrow[data-reveal]::before{width:0;transition:width .6s var(--ease) .15s;}
.eyebrow[data-reveal].in::before{width:22px;}

/* parallax hook (JS-driven) */
[data-parallax]{will-change:transform;}

/* process: line draws downward as you scroll through the steps; milestones appear as it reaches them */
#processTrack{position:relative;}
.process-thread{position:absolute;left:27px;top:0;bottom:0;width:2px;background:var(--line);z-index:0;}
.process-thread-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--accent);}
@media(max-width:900px){ .process-thread{display:none;} }
#processTrack .milestone{opacity:0;transform:translateX(-14px);transition:opacity .55s var(--ease),transform .55s var(--ease);position:relative;z-index:1;}
#processTrack .milestone.milestone-in{opacity:1;transform:translateX(0);}

/* image reveal mask: media wipes into view instead of fading like text does */
.media[data-reveal]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);}
.media[data-reveal].in{clip-path:inset(0 0 0% 0);}

/* signature orange line: dots grow in, choreographed by JS, never on hover, never looping */
.converge-dot{opacity:0;transform:scale(.25);transform-box:fill-box;transform-origin:center;transition:opacity .5s var(--ease),transform .55s cubic-bezier(.34,1.4,.64,1);}
.converge-dot.in{opacity:1;transform:scale(1);}

/* proof strip inside case studies: strategy documents, canva files, meta ads, etc. */
.proof-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gutter);}
.proof-strip .media{aspect-ratio:4/3;}

@media (prefers-reduced-motion: reduce){
  .hero-full .media{animation:none;}
  .hero-word-inner{animation:none;transform:none;}
  .scroll-cue .bar::after{animation:none;}
  [data-reveal]{transition:opacity .3s linear;transform:none;}
  html{scroll-behavior:auto;}
}