/* ==========================================================================
   Kavin — Freelance Digital Marketer
   Design system: Ink/Off-white/Pine — see /blueprint for rationale
   ========================================================================== */

:root{
  --bg:#FAF8F4;
  --surface:#FFFFFF;
  --surface-2:#F1EDE5;
  --ink:#191A1E;
  --ink-muted:#6B6A66;
  --accent:#1F5C52;
  --accent-soft:#E7EEEC;
  --accent-ink:#F5F3ED;
  --line:rgba(25,26,30,0.13);
  --line-strong:rgba(25,26,30,0.22);
  --shadow-sm:0 1px 2px rgba(25,26,30,.04), 0 6px 18px rgba(25,26,30,.05);
  --shadow-md:0 4px 10px rgba(25,26,30,.05), 0 16px 40px rgba(25,26,30,.08);
  --radius:10px;
  --radius-lg:16px;
  --container:1200px;
  --font-display:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.1; margin:0; text-wrap:balance; color:var(--ink); }
h2{font-weight:600;}
h3,h4{font-weight:600;}
p{margin:0 0 1.1em; max-width:62ch;}
a{color:var(--accent); text-decoration:none;}
a.underline-link{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong);}
img,svg{max-width:100%; display:block;}
ul,ol{margin:0; padding:0;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}
::selection{background:var(--accent); color:var(--accent-ink);}
.mono{font-family:var(--font-mono);}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.skip-link{position:absolute; left:1rem; top:-60px; background:var(--ink); color:var(--bg); padding:.7rem 1.1rem; border-radius:8px; z-index:200; transition:top .2s;}
.skip-link:focus{top:1rem;}

.container{max-width:var(--container); margin:0 auto; padding:0 1.5rem;}
@media (max-width:640px){ .container{padding:0 1.15rem;} }

.eyebrow{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); font-weight:500; display:inline-block; margin-bottom:.9rem;
}
.section{padding:5.5rem 0;}
.section-tight{padding:3.5rem 0;}
@media (max-width:780px){ .section{padding:3.6rem 0;} .section-tight{padding:2.6rem 0;} }
.section-alt{background:var(--surface);}
.section-head{max-width:56ch; margin-bottom:2.6rem;}
.section-head p{color:var(--ink-muted); font-size:1.05rem; margin-top:.9rem;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600;
  font-size:.92rem; padding:.85rem 1.5rem; border-radius:8px; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--ink); color:var(--bg);}
.btn-primary:hover{background:var(--accent); color:var(--accent-ink);}
.btn-secondary{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent);}
.btn-sm{padding:.6rem 1.1rem; font-size:.84rem;}
.btn-row{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.7rem;}
.arrow{transition:transform .15s ease;}
.btn:hover .arrow{transform:translateX(3px);}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(250,248,244,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--container); margin:0 auto; padding:1.05rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.logo{font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--ink); letter-spacing:-.01em;}
.logo .logo-dot{color:var(--accent);}
.main-nav ul{list-style:none; display:flex; gap:2rem; align-items:center;}
.main-nav a{color:var(--ink); font-size:.93rem; font-weight:500; position:relative; padding:.2rem 0;}
.main-nav a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;}
.main-nav a:hover::after{transform:scaleX(1);}
.header-cta{flex:none;}
.menu-toggle{display:none; width:42px; height:42px; border-radius:8px; border:1px solid var(--line); background:var(--surface); align-items:center; justify-content:center; cursor:pointer;}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{content:""; display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .2s ease, opacity .2s ease;}
.menu-toggle span::before{position:absolute; top:-6px;}
.menu-toggle span::after{position:absolute; top:6px;}
body.nav-open .menu-toggle span{background:transparent;}
body.nav-open .menu-toggle span::before{transform:translateY(6px) rotate(45deg);}
body.nav-open .menu-toggle span::after{transform:translateY(-6px) rotate(-45deg);}
.mobile-nav{display:none;}

@media (max-width:900px){
  .main-nav{display:none;}
  .header-cta{display:none;}
  .menu-toggle{display:flex;}
  .mobile-nav{
    display:block; position:fixed; inset:0; top:73px; background:var(--bg); padding:2rem 1.5rem;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; overflow-y:auto;
  }
  body.nav-open .mobile-nav{opacity:1; pointer-events:auto; transform:translateY(0);}
  .mobile-nav ul{list-style:none; display:flex; flex-direction:column; gap:.3rem;}
  .mobile-nav a{display:block; padding:.9rem .2rem; font-size:1.2rem; font-family:var(--font-display); font-weight:600; color:var(--ink); border-bottom:1px solid var(--line);}
  .mobile-nav .btn{margin-top:1.5rem; width:100%; justify-content:center;}
}

/* ---------- hero ---------- */
.hero{position:relative; padding:5rem 0 4.5rem; overflow:hidden;}
.hero-inner{max-width:44rem; position:relative; z-index:2;}
.hero h1{font-size:clamp(2.1rem, 1.35rem + 3vw, 3.5rem); max-width:17ch;}
.hero .lede{font-size:1.15rem; color:var(--ink-muted); margin-top:1.3rem; max-width:52ch;}
.hero-graphic{position:absolute; right:-8%; top:-10%; width:56%; max-width:640px; opacity:.55; z-index:1; color:var(--accent);}
@media (max-width:900px){ .hero-graphic{display:none;} }

/* ---------- trust strip ---------- */
.trust-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface);}
.trust-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; padding:2.2rem 0;}
.trust-grid div{font-size:.88rem; color:var(--ink-muted); line-height:1.45; border-left:1px solid var(--line); padding-left:1.1rem;}
.trust-grid div:first-child{border-left:none; padding-left:0;}
.trust-grid strong{display:block; color:var(--ink); font-family:var(--font-display); font-size:.95rem; margin-bottom:.25rem;}
@media (max-width:900px){ .trust-grid{grid-template-columns:repeat(2,1fr);} .trust-grid div{border-left:none; padding-left:0;} }

/* ---------- cards ---------- */
.grid{display:grid; gap:1.4rem;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card:hover, .card.hoverable:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong);}
.card .icon{width:38px; height:38px; color:var(--accent); margin-bottom:1.1rem;}
.card h3{font-size:1.08rem; margin-bottom:.6rem;}
.card p{color:var(--ink-muted); font-size:.94rem; margin-bottom:.9rem;}
.card .for-line{font-size:.82rem; color:var(--ink-muted); margin-bottom:.7rem;}
.card .for-line strong{color:var(--ink); font-weight:600;}
.card ul{list-style:none; margin:0 0 1rem; display:flex; flex-direction:column; gap:.4rem;}
.card ul li{font-size:.86rem; color:var(--ink-muted); padding-left:1.1rem; position:relative;}
.card ul li::before{content:"—"; position:absolute; left:0; color:var(--accent);}
.card-link{font-size:.87rem; font-weight:600; font-family:var(--font-display); color:var(--ink); display:inline-flex; align-items:center; gap:.4rem;}

.tile{
  aspect-ratio:4/3; border-radius:var(--radius-lg); background:linear-gradient(155deg, var(--surface-2), var(--accent-soft));
  display:flex; align-items:flex-end; padding:1.2rem; position:relative; overflow:hidden; border:1px solid var(--line);
}
.tile .tile-icon{position:absolute; top:1.2rem; left:1.2rem; width:30px; height:30px; color:var(--accent); opacity:.75;}
.tile .tile-tag{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; background:var(--surface); border:1px solid var(--line); padding:.3rem .6rem; border-radius:99px; color:var(--ink-muted);}

.work-card h3{font-size:1.05rem; margin:1rem 0 .3rem;}
.work-card .work-meta{font-size:.82rem; color:var(--ink-muted); margin-bottom:.5rem;}
.work-card p{font-size:.92rem; color:var(--ink-muted);}

.tag-pill{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent); padding:.32rem .7rem; border-radius:99px; display:inline-block;
}

/* ---------- filter bar ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.4rem;}
.filter-bar button{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.03em; padding:.5rem 1rem; border-radius:99px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-muted); cursor:pointer; transition:all .15s ease;
}
.filter-bar button:hover{border-color:var(--accent); color:var(--accent);}
.filter-bar button.active{background:var(--ink); color:var(--bg); border-color:var(--ink);}

/* ---------- process ---------- */
.process-list{display:grid; gap:0; border-top:1px solid var(--line);}
.process-item{display:grid; grid-template-columns:90px minmax(0,1fr); gap:1.5rem; padding:2rem 0; border-bottom:1px solid var(--line); align-items:baseline;}
.process-item .pnum{font-family:var(--font-mono); font-size:1.6rem; color:var(--accent); font-weight:500;}
.process-item h3{font-size:1.15rem; margin-bottom:.5rem;}
.process-item p{color:var(--ink-muted); margin:0;}
@media (max-width:640px){ .process-item{grid-template-columns:1fr; gap:.6rem;} }

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.4rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{font-family:var(--font-mono); font-size:1.3rem; color:var(--accent); flex:none; transition:transform .2s ease;}
.faq-item[open] summary .plus{transform:rotate(45deg);}
.faq-item .faq-a{padding:0 0 1.5rem; color:var(--ink-muted); max-width:65ch;}

/* ---------- stat / skills ---------- */
.skill-cat{border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; background:var(--surface);}
.skill-cat h4{font-size:.98rem; margin-bottom:.5rem;}
.skill-cat p{font-size:.87rem; color:var(--ink-muted); margin:0;}

/* ---------- callouts / notes ---------- */
.note{border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface); border-radius:8px; padding:1rem 1.3rem; font-size:.9rem; color:var(--ink-muted); margin:1.5rem 0;}
.note strong{color:var(--ink);}

/* ---------- avatar / monogram ---------- */
.monogram{
  width:180px; height:180px; border-radius:50%; background:linear-gradient(155deg, var(--ink), var(--accent));
  color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:700; font-size:3.4rem; flex:none;
}

/* ---------- case study ---------- */
.case-study{border-top:1px solid var(--line); padding:4rem 0; scroll-margin-top:6rem;}
.case-study:first-of-type{border-top:none;}
.cs-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem;}
.cs-meta{display:flex; gap:.6rem; flex-wrap:wrap;}
.cs-block{margin-bottom:1.8rem;}
.cs-block h4{font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:.6rem; font-weight:500;}
.cs-block p{color:var(--ink); max-width:68ch;}
.cs-grid{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;}
@media (max-width:780px){ .cs-grid{grid-template-columns:1fr;} }

/* ---------- final CTA ---------- */
.cta-band{background:var(--ink); color:var(--bg); border-radius:var(--radius-lg); padding:4rem 3rem; text-align:center;}
.cta-band h2{color:var(--bg); font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);}
.cta-band p{color:rgba(250,248,244,.7); margin:1rem auto 0; max-width:44ch;}
.cta-band .btn-row{justify-content:center;}
.cta-band .btn-primary{background:var(--bg); color:var(--ink);}
.cta-band .btn-primary:hover{background:var(--accent); color:var(--accent-ink);}
.cta-band .btn-secondary{border-color:rgba(250,248,244,.5); color:var(--bg);}
.cta-band .btn-secondary:hover{border-color:var(--bg);}
@media (max-width:640px){ .cta-band{padding:2.8rem 1.6rem;} }

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); background:var(--surface); margin-top:4rem;}
.footer-inner{max-width:var(--container); margin:0 auto; padding:3.6rem 1.5rem 2.4rem; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;}
.footer-brand p{color:var(--ink-muted); font-size:.9rem; margin-top:.9rem; max-width:32ch;}
.footer-col h5{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); margin-bottom:1rem;}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:.6rem;}
.footer-col a{color:var(--ink); font-size:.9rem;}
.footer-col a:hover{color:var(--accent);}
.footer-col li{font-size:.9rem; color:var(--ink-muted);}
.footer-bottom{border-top:1px solid var(--line); padding:1.3rem 1.5rem; max-width:var(--container); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; font-size:.82rem; color:var(--ink-muted);}
.footer-legal a{color:var(--ink-muted); margin-left:1.2rem;}
.footer-legal a:first-child{margin-left:0;}
.footer-legal a:hover{color:var(--accent);}
@media (max-width:900px){ .footer-inner{grid-template-columns:1fr 1fr; row-gap:2.2rem;} }
@media (max-width:560px){ .footer-inner{grid-template-columns:1fr;} }

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
.form-grid .full{grid-column:1 / -1;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
.field label{display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.45rem; font-family:var(--font-display);}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line-strong); border-radius:8px; padding:.8rem .9rem; font-family:var(--font-body);
  font-size:.95rem; background:var(--surface); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.field textarea{resize:vertical; min-height:120px;}

/* ---------- breadcrumb ---------- */
.breadcrumb{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-muted); margin-bottom:1.6rem;}
.breadcrumb a{color:var(--ink-muted);}
.breadcrumb a:hover{color:var(--accent);}

/* ---------- table-of-contents (blog posts) ---------- */
.two-col{display:grid; grid-template-columns:2fr 1fr; gap:3rem;}
@media (max-width:900px){ .two-col{grid-template-columns:1fr;} }