@font-face{
  font-family:'Kiona';
  src:url('/fonts/Kiona-Regular.woff2') format('woff2'),
      url('/fonts/Kiona-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Kiona';
  src:url('/fonts/Kiona-Bold.woff2') format('woff2'),
      url('/fonts/Kiona-Bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}

:root{
  --ink:#111111;
  --bg:#FFFFFF;
  --accent:#C0512B;
  --muted:#6B6B6B;
  --line:rgba(17,17,17,0.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans', sans-serif;
  font-size:16px;
  line-height:1.7;
}
.kiona{font-family:'Kiona', sans-serif; font-weight:700;}

/* Header */
html.loading, html.nav-lock{ overflow:hidden; }
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 6%;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
header a.logo{font-size:20px; color:var(--ink); text-decoration:none;}
nav{display:none; gap:28px; font-size:14px;}
nav a{color:var(--ink); text-decoration:none;}
nav a:hover{color:var(--accent);}
.menu-btn{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; border:none; background:none; cursor:pointer; padding:0;
}
.menu-btn span{ display:block; width:24px; height:2px; background:var(--ink); transition:transform .3s ease, opacity .3s ease; }
.menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(min-width:860px){ nav{display:flex;} .menu-btn{display:none;} }

#mobileNav{
  position:fixed; inset:0; top:0; z-index:90; background:var(--bg);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
  padding:0 8%; transform:translateY(-100%); transition:transform .45s cubic-bezier(.22,1,.36,1);
}
#mobileNav.open{ transform:translateY(0); }
#mobileNav a{
  font-family:'Kiona',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,8vw,44px); color:var(--ink); text-decoration:none; padding:10px 0;
}
#mobileNav a:hover{ color:var(--accent); }
@media(min-width:860px){ #mobileNav{display:none;} }

/* Hero */
.hero{padding:170px 6% 60px; max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start;}
.hero-text{flex:1 1 480px;}
.hero-eyebrow{font-size:15px; color:var(--accent); margin-bottom:16px;}
.hero h1{
  font-family:'Kiona', sans-serif;
  font-weight:700;
  font-size:clamp(34px,4.8vw,50px);
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  margin:18px 0 20px;
  max-width:16ch;
}
.hero-tags{font-size:14px; letter-spacing:0.08em; color:var(--muted); text-transform:uppercase;}
.hero-photo-wrap{flex:1 1 300px; position:relative; min-height:280px;}
.hero-photo{
  width:100%; max-width:380px; aspect-ratio:900/1081; overflow:hidden; background:#EDEDED;
  border-radius:16px; box-shadow:0 40px 70px -30px rgba(17,17,17,0.35);
  transform:scale(1.07); opacity:0; transition:transform 1.1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
}
.hero.visible .hero-photo{ transform:scale(1); opacity:1; }
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(100%);}
.hero-bubble{
  position:absolute; top:-16px; left:-16px; width:110px; height:110px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:13px; font-weight:500;
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.3; padding:8px;
}

section, .page-section{padding:80px 6%; max-width:900px; margin:0 auto;}

.eyebrow{color:var(--accent); font-size:14px; margin-bottom:18px; display:flex; align-items:center; gap:8px;}
.eyebrow::before{content:''; display:inline-block; width:7px; height:7px; background:var(--accent); flex-shrink:0;}
h2{font-family:'Kiona',sans-serif; font-weight:700; font-size:clamp(24px,3vw,32px); text-transform:uppercase; margin-bottom:28px;}
p{margin-bottom:16px; max-width:65ch;}

.exp-item{padding:22px 0; border-top:1px solid var(--line);}
.exp-item:last-child{border-bottom:1px solid var(--line);}
.exp-title{font-weight:500; font-size:17px;}
.exp-meta{font-size:13px; color:var(--accent); margin-bottom:8px;}

.services-grid{display:grid; grid-template-columns:1fr; gap:0; margin-top:12px; border-top:1px solid var(--line);}
@media(min-width:640px){ .services-grid{grid-template-columns:1fr 1fr;} }
.service-item{
  display:flex; align-items:baseline; gap:18px; padding:26px 4px;
  border-bottom:1px solid var(--line); transition:padding-left .2s ease;
}
@media(min-width:640px){ .service-item:nth-child(odd){border-right:1px solid var(--line); padding-right:24px;} .service-item:nth-child(even){padding-left:24px;} }
.service-item:hover{padding-left:14px;}
.service-num{font-family:'Kiona',sans-serif; font-weight:700; font-size:15px; color:var(--accent);}
.service-name{
  font-family:'Kiona',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(18px,2.6vw,24px); color:var(--ink); line-height:1.3;
}

.tiles{display:grid; grid-template-columns:1fr; gap:24px; margin-top:12px;}
@media(min-width:640px){ .tiles{grid-template-columns:1fr 1fr;} }
.tile{background:#EDEDED; height:220px; display:flex; align-items:flex-end; padding:16px; color:var(--muted); font-size:13px;}
.tile span{background:#fff; padding:4px 10px; font-size:12px;}

.client-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:12px;}
@media(min-width:640px){ .client-grid{grid-template-columns:repeat(4,1fr);} }
.client-cell{background:#fff; padding:22px 16px; font-size:14px; font-weight:500; text-align:center;}
.client-cell span{display:block; font-size:11px; color:var(--accent); font-weight:400; margin-top:4px;}

.edu-item{margin-bottom:22px;}
.edu-title{font-weight:500; font-size:16px;}
.edu-meta{font-size:13px; color:var(--accent);}

.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; cursor:pointer; font-weight:500; font-size:16px; background:none; border:none; width:100%; text-align:left; color:var(--ink); font-family:inherit;
}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{padding-bottom:18px; margin:0; color:var(--muted);}
.faq-item.open .faq-a{max-height:200px;}
.faq-plus{font-size:20px; color:var(--accent);}

.cta-band{background:var(--ink); color:#fff; padding:90px 6%; text-align:left;}
.cta-band h2{color:#fff; max-width:700px;}
.cta-band a{
  display:inline-block; margin-top:20px; background:#fff; color:var(--ink);
  padding:14px 28px; text-decoration:none; font-size:14px; font-weight:500;
}

footer{padding:60px 6% 40px; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:40px;}
.footer-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:48px; align-items:flex-start;}
.footer-brand{ flex:1 1 260px; max-width:340px; }
.footer-cols{display:flex; gap:60px; flex-wrap:wrap; flex:0 1 auto; padding-left:48px; border-left:1px solid var(--line); }
@media(max-width:700px){ .footer-cols{ border-left:none; padding-left:0; } }
.footer-cols div p{font-size:13px; color:var(--accent); margin-bottom:12px; max-width:none; text-transform:uppercase; letter-spacing:0.06em;}
.footer-cols a, .footer-cols span{display:block; color:var(--ink); text-decoration:none; font-size:14px; margin-bottom:10px;}
.footer-cols a:hover{ color:var(--accent); }
.footer-cols span.footer-meta{ color:var(--muted); font-size:13px; }
.footer-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding-top:24px; border-top:1px solid var(--line);}
.copyright{font-size:12px; color:var(--muted);}

/* --- Polish pass: loader, shimmer, banding, reveal --- */
:root{ --bg-soft:#F5F2ED; }

.section-alt{ background:var(--bg-soft); }

/* Cinematic loader */
#loader{
  position:fixed; inset:0; z-index:999; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hide{ opacity:0; visibility:hidden; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.loader-mark{ font-size:64px; letter-spacing:0.02em; opacity:0; animation:loaderMarkIn .6s ease forwards .1s; }
.loader-mark.pulse{ animation:loaderMarkOut .6s ease forwards; }
@keyframes loaderMarkIn{ from{opacity:0; transform:translateY(10px) scale(0.94);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes loaderMarkOut{ to{opacity:0; transform:translateY(-6px) scale(1.5); filter:blur(6px);} }
.loader-bar-track{ width:180px; height:1px; background:var(--line); overflow:hidden; }
.loader-bar{ width:0%; height:100%; background:var(--accent); transition:width 1.9s cubic-bezier(.65,0,.35,1); }

@keyframes shimmer{ 0%{background-position:200% center;} 100%{background-position:-200% center;} }

/* Scroll reveal */
.reveal-child{ opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease; }
.reveal-child.visible{ opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion: reduce){
  .reveal, .reveal-child{ opacity:1 !important; transform:none !important; transition:none !important; }
  [data-parallax]{ transform:none !important; }
}

.footer-logo{ font-size:22px; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

header{ transition:transform .35s ease; }

/* --- Hero rebalance, bubble removed --- */
.hero-small{ font-size:clamp(22px,3vw,30px); letter-spacing:0; font-weight:700; line-height:1.3; }

/* --- Round 3: header full name, scroll tint, footer glass --- */

header a.logo{ font-size:20px; }
header a.logo.shimmer{
  background:linear-gradient(100deg, var(--ink) 0%, var(--ink) 25%, var(--accent) 45%, var(--accent) 55%, var(--ink) 75%, var(--ink) 100%);
  background-size:250% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 7s linear infinite;
}
header.scrolled{ background:rgba(224,166,90,0.18); }

footer{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  flex-direction:column; align-items:flex-start; gap:28px;
}
.footer-brand .footer-logo{ font-size:26px; display:block; }
.footer-brand .footer-name{ font-size:13px; letter-spacing:0.1em; color:var(--accent); margin-top:4px; }
.footer-summary{ max-width:520px; font-size:14px; color:var(--muted); margin-top:14px; }
.footer-meta{ font-size:13px; color:var(--muted); margin-top:6px; }
.footer-social{ display:flex; gap:18px; margin-top:16px; }
.footer-social a{ font-size:13px; color:var(--ink); text-decoration:none; }
.footer-social a:hover{ color:var(--accent); }

/* Clients showcase — logo tiles with proof line */
.clients-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:12px;}
@media(min-width:640px){ .clients-grid{grid-template-columns:repeat(3,1fr);} }
.client-tile{
  background:#fff; padding:28px 20px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  transition:background .2s ease;
}
.client-tile:hover{ background:var(--bg-soft); }
.client-tile img{ height:56px; max-width:100%; width:auto; object-fit:contain; filter:grayscale(100%); transition:filter .2s ease; }
.client-tile:hover img{ filter:grayscale(0%); }
.client-tile-name{ font-size:14px; font-weight:500; }
.client-tile-desc{ font-size:12px; color:var(--muted); line-height:1.4; }
/* --- About section: subtle animated background --- */
#about{ position:relative; overflow:hidden; }
#skills{ position:relative; overflow:hidden; }
#clients{ position:relative; overflow:hidden; }
.about-bg, .section-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.about-shape, .section-shape{ position:absolute; border:1px solid var(--line); border-radius:50%; opacity:0.6; }
.section-shape.shape-square{ border-radius:0; opacity:0.5; }
.section-shape.shape-line{ width:2px; background:var(--line); border:none; }
.shape-1{ width:340px; height:340px; top:-80px; right:-60px; animation:driftSlow 22s ease-in-out infinite; }
.shape-2{ width:180px; height:180px; bottom:0; right:18%; border-color:var(--accent); opacity:0.25; animation:driftSlow 16s ease-in-out infinite reverse; }
.shape-3{ width:2px; height:220px; background:var(--line); border:none; top:20%; left:8%; animation:driftLine 18s ease-in-out infinite; }
@keyframes driftSlow{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-16px,18px);} }
@keyframes driftLine{ 0%,100%{transform:translateY(0) scaleY(1);} 50%{transform:translateY(14px) scaleY(1.08);} }
#about > p, #about > h2, #about > .eyebrow{ position:relative; z-index:1; }
#skills > .eyebrow, #skills > h2, #skills > .skills-hint, #skills > .flip-grid,
#clients > .eyebrow, #clients > h2, #clients > .clients-mosaic{ position:relative; z-index:1; }
@media(prefers-reduced-motion: reduce){ .about-shape{ animation:none; } }

/* --- Skills: flip cards --- */
.skills-hint{ font-size:13px; color:var(--muted); margin-top:-16px; margin-bottom:28px; }
.flip-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:640px){ .flip-grid{ grid-template-columns:1fr 1fr; } }
.flip-card{ height:280px; perspective:1200px; cursor:pointer; }
.flip-card-inner{
  position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;
}
.flip-card.is-flipped .flip-card-inner{ transform:rotateY(180deg); }
@media(hover:hover){ .flip-card:hover .flip-card-inner{ transform:rotateY(180deg); } }
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--line); padding:26px;
  display:flex; flex-direction:column; justify-content:center; background:#fff;
}
.flip-front{ gap:10px; }
.flip-back{ transform:rotateY(180deg); background:var(--ink); color:#fff; gap:6px; justify-content:flex-start; padding:22px 24px; overflow-y:auto; }
.flip-back-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin-bottom:2px; }
.flip-back-tools{ font-size:12.5px; line-height:1.4; margin-bottom:12px; color:#fff; opacity:0.9; }
.flip-back-desc{ font-size:12.5px; line-height:1.5; color:#fff; opacity:0.85; margin-bottom:0; }

/* --- Clients: mosaic grid, works on tap/scroll for mobile --- */
.clients-mosaic{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:20px; }
@media(min-width:640px){ .clients-mosaic{ grid-template-columns:repeat(4,1fr); grid-auto-rows:160px; } }
.client-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px;
  background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink); padding:24px 16px;
  transition:background .25s ease;
}
@media(min-width:640px){
  .client-card-lg{ grid-column:span 2; grid-row:span 2; }
  .client-card-wide{ grid-column:span 2; }
}
.client-card img{ height:48px; max-width:80%; object-fit:contain; filter:grayscale(100%); transition:filter .3s ease; }
.client-card-name{ font-size:14px; font-weight:600; }
.client-card-desc{ font-size:12px; color:var(--muted); line-height:1.4; }
.client-card.in-view img, .client-card:hover img{ filter:grayscale(0%); }
.client-card.in-view, .client-card:hover{ background:var(--bg-soft); }

/* --- Education: timeline --- */
.timeline{ border-left:2px solid var(--line); margin-top:12px; padding-left:28px; display:flex; flex-direction:column; gap:30px; }
.timeline-item{ position:relative; }
.timeline-dot{ position:absolute; left:-34px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.timeline-item .edu-title{ font-family:'Kiona',sans-serif; font-weight:700; text-transform:uppercase; font-size:16px; margin-bottom:4px; }
.timeline-item .edu-meta{ font-size:13px; color:var(--muted); }

/* --- CTA band: redesigned --- */
.cta-band{ position:relative; overflow:hidden; padding:100px 6%; }
.cta-eyebrow{ color:var(--accent) !important; }
.cta-band h2{ max-width:760px; margin-bottom:14px; }
.cta-sub{ max-width:520px; color:#cfcfcf; font-size:15px; margin-bottom:32px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; position:relative; z-index:1; }
.cta-btn{ display:inline-block; padding:14px 28px; text-decoration:none; font-size:14px; font-weight:500; }
.cta-btn-primary{ background:#fff; color:var(--ink); }
.cta-btn-ghost{ border:1px solid rgba(255,255,255,0.3); color:#fff; }
.cta-btn-ghost:hover{ border-color:#fff; }
.cta-bg{ position:absolute; inset:0; z-index:0; }
.cta-shape{
  position:absolute; right:-10%; top:-20%; width:480px; height:480px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
}
.cta-shape::before{
  content:''; position:absolute; inset:60px; border-radius:50%; border:1px solid rgba(224,166,90,0.15);
}

/* --- Footer: new elements --- */
.footer-tagline{ max-width:420px; font-size:14px; color:var(--muted); margin-top:14px; line-height:1.6; }
.footer-social{ display:flex; gap:12px; margin-top:6px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.footer-social a svg{ width:16px; height:16px; }
.footer-social a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* --- Subpage headings --- */
.page-section h1{ font-family:'Kiona',sans-serif; font-weight:700; font-size:clamp(30px,4vw,44px); text-transform:uppercase; margin-bottom:24px; }

/* --- Contact page --- */
.contact-block{ margin:28px 0 44px; }
.contact-meta{ display:grid; grid-template-columns:1fr; gap:24px; max-width:700px; border-top:1px solid var(--line); padding-top:28px; }
@media(min-width:640px){ .contact-meta{ grid-template-columns:repeat(3,1fr); } }

/* --- Case study drawer --- */
.client-card{ font: inherit; cursor:pointer; width:100%; }
#caseOverlay{
  position:fixed; inset:0; background:rgba(17,17,17,0.5); z-index:1200; opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
#caseOverlay.open{ opacity:1; visibility:visible; }
#caseDrawer{
  position:fixed; top:0; right:0; height:100%; width:min(460px,100%); background:#fff; z-index:1201;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.22,1,.36,1);
  overflow-y:auto; padding:60px 36px 50px;
}
#caseDrawer.open{ transform:translateX(0); }
#caseClose{
  position:absolute; top:20px; right:24px; font-size:28px; line-height:1; background:none; border:none;
  cursor:pointer; color:var(--muted);
}
#caseClose:hover{ color:var(--ink); }
.case-logo{ height:44px; max-width:160px; object-fit:contain; margin-bottom:20px; }
#caseContent h2{ font-family:'Kiona',sans-serif; font-weight:700; text-transform:uppercase; font-size:26px; margin-bottom:6px; }
.case-tagline{ color:var(--muted); font-size:13px; margin-bottom:28px; }
.case-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin-bottom:6px; margin-top:22px; }
#caseContent p:not(.case-label):not(.case-tagline){ font-size:14px; line-height:1.6; color:var(--ink); }
.case-visit{ display:inline-block; margin-top:30px; background:var(--ink); color:#fff; }
@media(max-width:480px){ #caseDrawer{ padding:50px 24px 40px; } }