/* =========================================================
   BLACKBEAM — editorial dark
   Palette: deep ink, bone, ember accent
   Typography: Fraunces (display, editorial serif) + Inter Tight (sans)
   ========================================================= */

:root{
  --ink:        #0b0b0d;
  --ink-2:      #111115;
  --ink-3:      #17171c;
  --rule:       #2a2a31;
  --rule-soft:  #1d1d23;
  --bone:       #ece6d8;
  --bone-dim:   #d3ccba;
  --bone-mute:  #8c8676;
  --ember:      #c58a3a;
  --ember-soft: #d9a866;
  --blood:      #8a2a2a;

  --serif: "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --measure: 62ch;
  --grid-max: 1360px;
  --nav-h: 86px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{
  background:var(--ink);
}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Grain + vignette overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:100;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(197,138,58,.05), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.5), transparent 70%);
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:101;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{
  max-width:var(--grid-max);
  margin:0 auto;
  padding-left:max(clamp(20px, 4vw, 56px), env(safe-area-inset-left));
  padding-right:max(clamp(20px, 4vw, 56px), env(safe-area-inset-right));
}

/* ========== TYPOGRAPHY SYSTEM ========== */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ember);
  font-weight:500;
}
.display{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:.98;
  color:var(--bone);
}
.h-serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; }
.h-sans{  font-family:var(--sans);  font-weight:500; letter-spacing:-.005em; }
em, i { font-style:italic; font-family:var(--serif); font-weight:300; color:var(--bone); }

p{ max-width:var(--measure) }

/* ========== NAV ========== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  padding-top:max(22px, env(safe-area-inset-top));
  background:var(--ink);
  border-bottom:1px solid var(--rule-soft);
  transition:padding .3s ease, background .3s ease;
}
.nav.scrolled{
  padding:14px 0;
  padding-top:max(14px, env(safe-area-inset-top));
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px }

.brand{
  display:flex; align-items:center;
  height:54px;
}
.brand-logo{
  height:48px;
  width:auto;
  display:block;
  transition:opacity .25s;
}
.brand:hover .brand-logo{ opacity:.85 }

.nav-links{
  display:flex; gap:32px; align-items:center;
  font-family:var(--sans); font-size:13px; font-weight:400;
  letter-spacing:.04em;
  color:var(--bone-dim);
}
.nav-links a{ position:relative; transition:color .25s }
.nav-links a:hover{ color:var(--bone) }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px;
  height:1px; background:var(--ember);
  transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after{ right:0 }
.nav-links a[aria-current="page"]{ color:var(--bone) }
.nav-links a[aria-current="page"]::after{ right:0 }

.nav-cta{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:10px 18px;
  border:1px solid var(--rule);
  color:var(--bone);
  transition:all .3s ease;
}
.nav-cta:hover{ border-color:var(--ember); color:var(--ember) }
.nav-cta[aria-current="page"]{ border-color:var(--ember); color:var(--ember) }
.nav-cta[aria-current="page"]::after{ display:none }

.nav-toggle{
  display:none; background:none; border:none;
  color:var(--bone); cursor:pointer; padding:0;
}
.nav-toggle .icon-close{ display:none }
.nav-toggle svg{ display:block }

/* ========== PAGE HERO (inner pages) ========== */
.page-hero{
  padding:calc(var(--nav-h) + 100px) 0 80px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--rule-soft);
  isolation:isolate;
}
/* Taustakuva — eri sijoittelu per sivu */
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:-2;
  background-image:url('/assets/img/header-bg.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.32;
  filter:saturate(.7) contrast(1.05);
}
/* Dark overlay + ember vignette */
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:
    radial-gradient(1000px 500px at 85% 10%, rgba(197,138,58,.07), transparent 60%),
    linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.78) 100%);
  pointer-events:none;
}

/* Sivu-kohtaiset sijoittelut */
body[data-page="meista"]    .page-hero::before{ background-position:right 30% center; transform:scaleX(-1); }
body[data-page="palvelut"]  .page-hero::before{ background-position:left 20% top; }
body[data-page="yhteys"]    .page-hero::before{ background-position:right top; opacity:.28; }
body[data-page="tietosuoja"].page-hero::before{ background-position:center bottom; opacity:.24; }
body[data-page="404"]       .page-hero::before{ background-position:center; opacity:.22; }

.page-hero-inner{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:40px;
  position:relative;
  max-width:1000px;
}
.page-hero .section-label{ padding-top:14px }
.page-hero h1{
  font-family:var(--serif);
  font-size:clamp(44px, 7vw, 96px);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--bone);
  margin-bottom:24px;
}
.page-hero h1 em{ color:var(--ember-soft) }
.page-hero-lead{
  font-family:var(--serif);
  font-size:clamp(18px, 1.6vw, 22px);
  font-weight:300;
  line-height:1.5;
  max-width:56ch;
  color:var(--bone-dim);
}

/* Pieni huomio ingressin alle (esim. BB+VP) */
.page-hero-note{
  margin-top:32px;
  padding:20px 24px;
  background:rgba(197,138,58,.05);
  border-left:2px solid var(--ember);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  color:var(--bone-dim);
  max-width:60ch;
}
.page-hero-note .note-label{
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ember);
  margin-right:8px;
}
.page-hero-note a{
  color:var(--ember-soft);
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
  margin-left:4px;
  transition:border-color .3s;
}
.page-hero-note a:hover{ border-color:var(--ember-soft) }

/* ========== HOME HERO ========== */
.hero{
  min-height:100vh;
  padding:180px 0 80px;
  position:relative;
  overflow:hidden;
  display:flex; align-items:center;
  isolation:isolate;
}
/* Taustakuva etusivulle */
.hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:-2;
  background-image:url('/assets/img/header-bg.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:right top;
  opacity:.30;
  filter:saturate(.7) contrast(1.05);
}
/* Dark overlay + ember/blood vignette */
.hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 600px at 85% 10%, rgba(197,138,58,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(138,42,42,.06), transparent 60%),
    linear-gradient(180deg, rgba(11,11,13,.45) 0%, rgba(11,11,13,.78) 100%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap:80px;
  align-items:end;
  width:100%;
}
.hero-meta{
  display:flex; align-items:center; gap:14px;
  margin-bottom:40px;
}
.hero-meta .line{ flex:1; height:1px; background:var(--rule); max-width:60px }

.hero h1{
  font-size:clamp(38px, 8.5vw, 132px);
  font-weight:300;
  line-height:.95;
  letter-spacing:-.03em;
  margin-bottom:36px;
  font-family:var(--serif);
  color:var(--bone);
  word-break:break-word;
  hyphens:auto;
}
.hero h1 .italic{ font-style:italic; color:var(--ember-soft); font-weight:300 }

.hero-sub{
  font-family:var(--serif);
  font-size:clamp(18px, 1.6vw, 22px);
  font-weight:300;
  line-height:1.5;
  max-width:52ch;
  color:var(--bone-dim);
  margin-bottom:40px;
}

.hero-cta-row{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}

.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:16px 24px;
  transition:all .3s cubic-bezier(.2,.7,.2,1);
  cursor:pointer;
  border:none;
}
.btn-primary{
  background:var(--bone);
  color:var(--ink);
}
.btn-primary:hover{
  background:var(--ember);
  transform:translateY(-1px);
}
.btn-ghost{
  border:1px solid var(--rule);
  color:var(--bone-dim);
  background:transparent;
}
.btn-ghost:hover{ border-color:var(--bone); color:var(--bone) }
.btn .arrow{ transition:transform .3s }
.btn:hover .arrow{ transform:translateX(4px) }

.hero-side{
  border-left:1px solid var(--rule);
  padding-left:40px;
  padding-bottom:20px;
}
.hero-side-head{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-mute);
  margin-bottom:24px;
}
.values-list{ list-style:none; counter-reset:val }
.values-list li{
  counter-increment:val;
  padding:18px 0;
  border-bottom:1px solid var(--rule-soft);
  display:flex; align-items:baseline; gap:18px;
  font-family:var(--serif);
  font-size:22px;
  font-weight:400;
  line-height:1.2;
  color:var(--bone);
}
.values-list li:last-child{border-bottom:none}
.values-list li::before{
  content: "0" counter(val);
  font-family:var(--mono);
  font-size:10px;
  color:var(--ember);
  letter-spacing:.1em;
  min-width:28px;
}

.scroll-hint{
  position:absolute; bottom:32px; left:50%;
  transform:translateX(-50%);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone-mute);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.scroll-hint .line-v{
  width:1px; height:40px;
  background:linear-gradient(180deg, var(--rule), transparent);
  animation:drip 2.6s ease-in-out infinite;
}
@keyframes drip{
  0%,100%{transform:scaleY(.6); transform-origin:top; opacity:.4}
  50%{transform:scaleY(1); opacity:1}
}

/* ========== SECTION CHROME ========== */
section{ padding:clamp(80px, 10vw, 160px) 0; position:relative; }
.section-head{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:40px;
  margin-bottom:80px;
  align-items:start;
}
.section-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ember);
  padding-top:14px;
  border-top:1px solid var(--ember);
  display:inline-block;
}
.section-title{
  font-family:var(--serif);
  font-size:clamp(36px, 5.5vw, 72px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.02em;
  max-width:16ch;
}
.section-title em{ color:var(--ember-soft) }

/* ========== MANIFESTO ========== */
.manifesto{
  background:var(--ink-2);
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.manifesto-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  align-items:start;
}
.manifesto-lead{
  font-family:var(--serif);
  font-size:clamp(22px, 2.4vw, 32px);
  font-weight:300;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--bone);
}
.manifesto-lead .drop{
  float:left;
  font-size:5em;
  line-height:.82;
  font-weight:300;
  padding:.05em .12em 0 0;
  color:var(--ember);
  font-style:italic;
}
.manifesto-body p{
  font-size:16px; line-height:1.8;
  color:var(--bone-dim);
  margin-bottom:20px;
}
.manifesto-body p:first-child{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.55;
  color:var(--bone);
  font-weight:300;
}

.audience{
  margin-top:80px;
  padding-top:48px;
  border-top:1px solid var(--rule-soft);
}
.audience-head{
  display:flex; align-items:center; gap:16px;
  margin-bottom:36px;
}
.audience-head .line{ flex:1; height:1px; background:var(--rule-soft); }
.chips{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
}
.chip{
  font-family:var(--serif);
  font-size:15px;
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1.3;
  padding:22px 16px;
  background:var(--ink-2);
  border:1px solid var(--rule-soft);
  color:var(--bone);
  transition:all .35s ease;
  display:flex;
  align-items:center;
  min-height:88px;
}
.chip:hover{ background:var(--ink-3); color:var(--ember-soft); border-color:var(--rule) }

/* ========== VALUE PROP — "Mitä teemme" (etusivu) ========== */
.value-prop{
  background:var(--ink);
  border-top:1px solid var(--rule-soft);
}
.value-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule-soft);
  margin-bottom:60px;
}
.value-card{
  background:var(--ink);
  padding:48px 36px;
  display:flex;
  flex-direction:column;
  transition:background .4s ease;
  min-height:280px;
}
.value-card:hover{ background:var(--ink-2) }
.value-num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ember);
  margin-bottom:24px;
}
.value-card h3{
  font-family:var(--serif);
  font-size:26px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:16px;
  color:var(--bone);
}
.value-card p{
  font-size:15px;
  line-height:1.7;
  color:var(--bone-dim);
  margin-top:auto;
}
.value-cta{
  text-align:center;
}

/* ========== BOOK TEASER (etusivu, kirjanosto) ========== */
.book-teaser{
  background:var(--ink-2);
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.book-teaser-grid{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap:80px;
  align-items:center;
}
.book-teaser-cover{
  max-width:280px;
  position:relative;
  box-shadow:
    0 40px 80px rgba(0,0,0,.6),
    0 10px 20px rgba(0,0,0,.3);
  transform:rotate(-1.5deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  margin-left:auto;
  overflow:hidden;
}
.book-teaser-cover img{
  display:block;
  width:100%;
  height:auto;
}
.book-teaser-cover:hover{ transform:rotate(0deg) translateY(-6px) }
.book-teaser-body .eyebrow{ display:block; margin-bottom:20px }
.book-teaser-body h2{
  font-family:var(--serif);
  font-size:clamp(36px, 5vw, 64px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:24px;
  color:var(--bone);
}
.book-teaser-body h2 em{ color:var(--ember-soft) }
.book-teaser-lead{
  font-family:var(--serif);
  font-size:19px;
  font-weight:300;
  line-height:1.55;
  color:var(--bone-dim);
  margin-bottom:32px;
  max-width:48ch;
}

/* ========== APPROACH SECTION (palvelut-sivu) ========== */
.approach-section{
  background:var(--ink-2);
  border-top:1px solid var(--rule-soft);
}
.approach-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:80px;
  align-items:start;
}
.approach-text p{
  font-size:16px;
  line-height:1.8;
  color:var(--bone-dim);
  margin-bottom:20px;
}
.approach-text .approach-lead{
  font-family:var(--serif);
  font-size:clamp(20px, 1.8vw, 24px);
  font-weight:300;
  line-height:1.5;
  color:var(--bone);
  margin-bottom:32px;
  letter-spacing:-.005em;
}
.approach-text .approach-lead em{ color:var(--ember-soft) }
.approach-aside{
  border-left:1px solid var(--rule);
  padding-left:32px;
  position:sticky;
  top:120px;
}
.approach-aside-head{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone-mute);
  margin-bottom:24px;
}
.approach-list{
  list-style:none;
}
.approach-list li{
  padding:14px 0;
  border-bottom:1px solid var(--rule-soft);
  display:flex;
  align-items:baseline;
  gap:14px;
  font-family:var(--serif);
  font-size:18px;
  font-weight:400;
  color:var(--bone);
  line-height:1.3;
}
.approach-list li:last-child{ border-bottom:none }
.approach-list li span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--ember);
  min-width:24px;
}

/* ========== COLLAB SECTION (BB x VP yhteistyöpaketit) ========== */
.collab-section{
  background:var(--ink-2);
  border-top:1px solid var(--rule-soft);
  position:relative;
  overflow:hidden;
}
.collab-section::before{
  content:"";
  position:absolute;
  top:20%; right:-200px;
  width:500px; height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(197,138,58,.08), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
}

.collab-intro{
  font-family:var(--serif);
  font-size:clamp(18px, 1.6vw, 22px);
  font-weight:300;
  line-height:1.55;
  color:var(--bone-dim);
  max-width:68ch;
  margin-bottom:72px;
  position:relative;
}
.collab-intro em{ color:var(--ember-soft) }

/* Logorivi: BB × Valmira Pro */
.collab-logos{
  display:flex;
  align-items:center;
  gap:28px;
  margin-bottom:40px;
}
.collab-logo{
  height:45px;
  width:auto;
  display:block;
}
.collab-logo-x{
  font-family:var(--serif);
  font-size:24px;
  font-weight:300;
  color:var(--bone-mute);
  line-height:1;
}

.collab-packages{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule);
  position:relative;
}
.collab-pkg{
  background:var(--ink-2);
  padding:44px 36px;
  display:flex;
  flex-direction:column;
  transition:background .4s ease;
  min-height:340px;
  position:relative;
}
.collab-pkg::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:32px;
  height:3px;
  background:var(--ember);
}
.collab-pkg:hover{ background:var(--ink-3) }

.collab-pkg-head{
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule-soft);
}
.collab-pkg-num{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ember);
  margin-bottom:16px;
}
.collab-pkg h3{
  font-family:var(--serif);
  font-size:28px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-bottom:10px;
  color:var(--bone);
}
.collab-pkg-sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;
  color:var(--ember-soft);
  font-weight:300;
}
.collab-pkg-body{
  font-size:15px;
  line-height:1.7;
  color:var(--bone-dim);
  margin-bottom:24px;
  flex:1;
}
.collab-pkg-suits{
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  color:var(--bone);
  padding-top:20px;
  border-top:1px solid var(--rule-soft);
  line-height:1.5;
}

/* ========== COURSES SECTION (palvelut-sivun §04) ========== */
.courses-section{
  background:var(--ink);
  border-top:1px solid var(--rule-soft);
}

/* ========== PEOPLE ========== */
.people{ background:var(--ink); }
.person{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:60px;
  padding:64px 0;
  border-top:1px solid var(--rule-soft);
  align-items:start;
}
.person:last-of-type{ border-bottom:1px solid var(--rule-soft) }
.person-portrait{ position:sticky; top:120px }
.portrait-box{
  aspect-ratio: 3/4;
  background:linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--rule-soft);
  position:relative;
  overflow:hidden;
}
.portrait-box::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 40% 30%, rgba(197,138,58,.15), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(138,42,42,.08), transparent 60%);
}
.portrait-initial{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:130px;
  font-weight:300;
  font-style:italic;
  letter-spacing:-.04em;
  color:var(--bone);
  opacity:.12;
  line-height:1;
}
.portrait-meta{
  position:absolute; bottom:20px; left:20px; right:20px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-mute);
  display:flex; justify-content:space-between;
}
.person-body .eyebrow{ margin-bottom:16px; display:block }
.person-name{
  font-family:var(--serif);
  font-size:clamp(36px, 4vw, 56px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:8px;
}
.person-role{
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
  color:var(--ember-soft);
  font-weight:300;
  margin-bottom:32px;
}
.person-bio{
  font-size:16px; line-height:1.75; color:var(--bone-dim);
  margin-bottom:20px;
}
.person-bio strong{ color:var(--bone); font-weight:500 }

.competence-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--rule-soft);
}
.competence h4{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ember);
  margin-bottom:8px;
}
.competence p{ font-size:14px; line-height:1.6; color:var(--bone-dim) }

/* ========== SERVICES ========== */
.services{ background:var(--ink-2); border-top:1px solid var(--rule-soft); }
.formats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule-soft);
  margin-bottom:120px;
}
.format{
  background:var(--ink-2);
  padding:40px 32px;
  transition:background .4s ease;
  min-height:280px;
  display:flex; flex-direction:column;
}
.format:hover{ background:var(--ink-3) }
.format-num{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.2em;
  color:var(--ember);
  margin-bottom:24px;
}
.format h3{
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:8px;
  color:var(--bone);
}
.format-dur{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--bone-mute);
  margin-bottom:20px;
}
.format p{
  font-size:15px; line-height:1.7;
  color:var(--bone-dim);
}

.courses-header{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:60px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule-soft);
}
.courses-header h3{
  font-family:var(--serif);
  font-size:clamp(28px,3.5vw,44px);
  font-weight:300;
  letter-spacing:-.01em;
}
.courses-header .count{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-mute);
}

.courses{ display:flex; flex-direction:column; }
.course{
  display:grid;
  grid-template-columns: 80px 1fr 2fr;
  gap:40px;
  padding:40px 0;
  border-top:1px solid var(--rule-soft);
  align-items:start;
  transition:padding .4s ease;
}
.course:hover{ padding-left:12px }
.course:last-child{ border-bottom:1px solid var(--rule-soft) }
.course-num{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ember);
  letter-spacing:.1em;
  padding-top:8px;
}
.course-title{
  font-family:var(--serif);
  font-size:clamp(20px, 2vw, 28px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--bone);
}
.course-desc{
  font-size:15px;
  line-height:1.7;
  color:var(--bone-dim);
  max-width:60ch;
}

.add-services{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--rule-soft);
  margin-top:100px;
  border:1px solid var(--rule-soft);
}
.add-svc{
  background:var(--ink-2);
  padding:48px 40px;
  min-height:220px;
  display:flex; flex-direction:column;
}
.add-svc h4{
  font-family:var(--serif);
  font-size:26px;
  font-weight:300;
  letter-spacing:-.01em;
  margin-bottom:16px;
  color:var(--bone);
}
.add-svc p{ font-size:14px; line-height:1.7; color:var(--bone-dim) }

/* ========== APPROACH PULL QUOTE ========== */
.approach{
  background:var(--ink);
  position:relative;
  overflow:hidden;
}
.approach::before{
  content:"";
  position:absolute;
  top:20%; left:-200px;
  width:600px; height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(197,138,58,.06), transparent 70%);
  filter:blur(40px);
}
.approach-inner{
  max-width:1100px; margin:0 auto;
  position:relative;
}
.approach-quote-mark{
  font-family:var(--serif);
  font-size:200px;
  line-height:.5;
  color:var(--ember);
  opacity:.5;
  font-style:italic;
  height:80px;
  margin-bottom:20px;
}
.approach-quote{
  font-family:var(--serif);
  font-size:clamp(24px, 3.2vw, 42px);
  font-weight:300;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--bone);
  max-width:26ch;
}
.approach-quote em{ color:var(--ember-soft) }
.approach-attr{
  margin-top:48px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-mute);
}

/* ========== PUBLICATIONS ========== */
.publications{ background:var(--ink-2); border-top:1px solid var(--rule-soft); }
.book-feature{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap:80px;
  align-items:center;
  padding:40px 0 80px;
  border-bottom:1px solid var(--rule-soft);
  margin-bottom:80px;
}
.book-cover{
  position:relative;
  box-shadow:
    0 40px 80px rgba(0,0,0,.6),
    0 10px 20px rgba(0,0,0,.3);
  transform:rotate(-1.5deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  overflow:hidden;
  max-width:360px;
}
.book-cover img{
  display:block;
  width:100%;
  height:auto;
}
.book-cover:hover{ transform:rotate(0deg) translateY(-6px) }
.book-info .eyebrow{ margin-bottom:20px; display:block }
.book-info h3{
  font-family:var(--serif);
  font-size:clamp(32px, 4vw, 52px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:8px;
}
.book-info .subtitle{
  font-family:var(--serif); font-style:italic;
  font-size:20px; color:var(--bone-dim);
  margin-bottom:28px;
}
.book-info p{
  font-size:15px; line-height:1.75; color:var(--bone-dim);
  margin-bottom:16px;
}
.book-meta{
  display:grid;
  grid-template-columns: auto auto;
  gap:12px 32px;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:12px;
  color:var(--bone-dim);
}
.book-meta dt{ color:var(--ember); letter-spacing:.1em; text-transform:uppercase; font-size:10px }
.book-meta dd a{ color:var(--bone); border-bottom:1px solid var(--rule); transition:border-color .3s }
.book-meta dd a:hover{ border-color:var(--ember) }

.pub-list{ list-style:none }
.pub-list li{
  border-top:1px solid var(--rule-soft);
  transition:background .3s ease;
}
.pub-list li:last-child{ border-bottom:1px solid var(--rule-soft) }
.pub-list li:hover{ background:rgba(197,138,58,.025) }

/* Klikattava rivi — koko <a> tai <div> */
.pub-list .pub-row{
  display:grid;
  grid-template-columns: 180px minmax(0, 38ch) auto;
  gap:56px;
  padding:32px 16px;
  align-items:baseline;
  color:inherit;
  transition:padding .35s cubic-bezier(.2,.7,.2,1);
}
.pub-list a.pub-row:hover{ padding-left:24px }

.pub-list .pub-source{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ember);
  align-self:center;
}
.pub-list .pub-title{
  font-family:var(--serif);
  font-size:20px;
  font-weight:400;
  line-height:1.35;
  color:var(--bone);
  letter-spacing:-.005em;
  transition:color .3s;
}
.pub-list a.pub-row:hover .pub-title{ color:var(--ember-soft) }
.pub-list .pub-ext{
  font-family:var(--mono);
  font-size:10px;
  color:var(--bone-mute);
  letter-spacing:.1em;
  white-space:nowrap;
  align-self:center;
  transition:color .3s;
}
.pub-list a.pub-row:hover .pub-ext{ color:var(--ember) }

/* ========== TESTIMONIALS ========== */
.testimonials{
  background:var(--ink);
  border-top:1px solid var(--rule-soft);
  padding:clamp(80px, 10vw, 140px) 0;
  position:relative;
}
.testimonial-track{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  margin-top:40px;
}
.testimonial{
  padding:36px 28px;
  border:1px solid var(--rule-soft);
  background:var(--ink-2);
  transition:all .4s;
  position:relative;
  display:flex; flex-direction:column;
}
.testimonial:hover{
  border-color:var(--ember);
  transform:translateY(-4px);
}
.testimonial::before{
  content:"\201C";
  position:absolute; top:16px; right:24px;
  font-family:var(--serif);
  font-size:64px;
  line-height:1;
  color:var(--ember);
  opacity:.3;
  font-style:italic;
}
.testimonial p{
  font-family:var(--serif);
  font-size:17px;
  font-weight:300;
  font-style:italic;
  line-height:1.45;
  color:var(--bone);
  margin-bottom:20px;
  flex:1;
}
.testimonial-meta{
  padding-top:16px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-mute);
}

/* ========== CONTACT ========== */
.contact{
  background:var(--ink-2);
  border-top:1px solid var(--rule-soft);
  padding:clamp(100px, 12vw, 180px) 0;
  position:relative;
  overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute;
  bottom:-300px; right:-200px;
  width:700px; height:700px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(197,138,58,.08), transparent 70%);
  filter:blur(60px);
}
.contact-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:100px;
  align-items:start;
}
.contact-left h2{
  font-family:var(--serif);
  font-size:clamp(40px, 6vw, 88px);
  font-weight:300;
  line-height:.95;
  letter-spacing:-.02em;
  margin-bottom:32px;
}
.contact-left h2 em{ color:var(--ember-soft) }
.contact-left p{
  font-size:17px; line-height:1.7; color:var(--bone-dim);
  max-width:42ch;
  margin-bottom:40px;
}
.contact-email{
  display:inline-flex;
  align-items:center; gap:16px;
  font-family:var(--serif);
  font-size:clamp(22px, 2.2vw, 32px);
  font-weight:300;
  color:var(--bone);
  padding:20px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  transition:color .3s;
}
.contact-email:hover{ color:var(--ember) }
.contact-email .arrow{
  display:inline-block;
  transition:transform .3s;
  color:var(--ember);
}
.contact-email:hover .arrow{ transform:translate(4px, -4px) }

.contact-form{
  padding:48px 40px;
  background:var(--ink-3);
  border:1px solid var(--rule-soft);
}
.contact-form .form-title{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ember);
  margin-bottom:32px;
  padding-bottom:16px;
  border-bottom:1px solid var(--rule-soft);
}
.field{ margin-bottom:24px }
.field label{
  display:block;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-mute);
  margin-bottom:8px;
}
.field input,
.field textarea,
.field select{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--rule);
  padding:12px 0;
  color:var(--bone);
  font-family:var(--sans);
  font-size:15px;
  transition:border-color .3s;
}
.field textarea{ resize:vertical; min-height:80px }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-bottom-color:var(--ember);
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--bone-mute) }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c58a3a' d='M6 8L0 0h12z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 0 center;
  background-size:10px;
  padding-right:24px;
}
.field select option{ background:var(--ink-3); color:var(--bone) }
.field select optgroup{ background:var(--ink-2); color:var(--ember); font-family:var(--mono); font-size:11px; letter-spacing:.1em; }

.form-submit{
  width:100%;
  margin-top:16px;
  background:var(--bone);
  color:var(--ink);
  border:none;
  padding:18px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .3s;
}
.form-submit:hover{
  background:var(--ember);
}
.form-submit:disabled{
  opacity:.6; cursor:wait;
}

.form-feedback{
  margin-top:20px;
  padding:16px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.05em;
  text-align:center;
}
.form-feedback.success{
  border:1px solid var(--ember);
  color:var(--ember-soft);
}
.form-feedback.error{
  border:1px solid var(--blood);
  color:#d47373;
}

/* Honeypot field — hide from real users */
.hp-field{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }

/* ========== PRIVACY PAGE ========== */
.privacy-body{
  max-width:62ch;
  margin:0 auto;
  padding:60px 0;
}
.privacy-body h2{
  font-family:var(--serif);
  font-size:28px;
  font-weight:400;
  margin:48px 0 16px;
  letter-spacing:-.01em;
}
.privacy-body h2:first-child{ margin-top:0 }
.privacy-body p{ margin-bottom:16px; color:var(--bone-dim) }
.privacy-body ul{ margin:16px 0 16px 20px; color:var(--bone-dim) }
.privacy-body li{ margin-bottom:8px }

/* ========== FOOTER ========== */
footer{
  background:var(--ink);
  border-top:1px solid var(--rule-soft);
  padding:80px 0 56px;
  margin-top:40px;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-mute);
}
.footer-bottom .footer-email{
  color:var(--bone);
  text-transform:none;
  letter-spacing:.02em;
  font-family:var(--sans);
  font-size:14px;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
  transition:border-color .3s, color .3s;
}
.footer-bottom .footer-email:hover{
  color:var(--ember);
  border-bottom-color:var(--ember);
}
.footer-company-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
}
.footer-company{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
.footer-copyright{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--bone-dim);
  opacity:1;
}
.footer-privacy{
  transition:color .3s;
}
.footer-privacy:hover{ color:var(--ember) }

/* ========== ANIMATIONS ========== */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:none }
.stagger > *{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.stagger.in > *{ opacity:1; transform:none }
.stagger.in > *:nth-child(1){ transition-delay:0s }
.stagger.in > *:nth-child(2){ transition-delay:.08s }
.stagger.in > *:nth-child(3){ transition-delay:.16s }
.stagger.in > *:nth-child(4){ transition-delay:.24s }
.stagger.in > *:nth-child(5){ transition-delay:.32s }
.stagger.in > *:nth-child(6){ transition-delay:.40s }

.hero .animate-in{
  opacity:0;
  transform:translateY(24px);
  animation:riseIn 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero .animate-in.d1{ animation-delay:.1s }
.hero .animate-in.d2{ animation-delay:.25s }
.hero .animate-in.d3{ animation-delay:.45s }
.hero .animate-in.d4{ animation-delay:.65s }
.hero .animate-in.d5{ animation-delay:.85s }
@keyframes riseIn{ to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal, .stagger > *{ opacity:1; transform:none }
}

/* ========== RESPONSIVE ========== */
/* Chips — laskeva sarakemäärä */
@media (max-width: 1280px){
  .chips{ grid-template-columns:repeat(4, 1fr); gap:10px }
}
@media (max-width: 900px){
  .chips{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width: 600px){
  .chips{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width: 420px){
  .chips{ grid-template-columns:1fr }
}

@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; gap:50px }
  .hero-side{ border-left:none; border-top:1px solid var(--rule); padding-left:0; padding-top:32px }
  .section-head{ grid-template-columns:1fr; gap:20px }
  .page-hero-inner{ grid-template-columns:1fr; gap:24px }
  .manifesto-grid{ grid-template-columns:1fr; gap:40px }
  .person{ grid-template-columns:1fr; gap:32px }
  .person-portrait{ position:static; max-width:320px }
  .formats{ grid-template-columns:repeat(2, 1fr) }
  .course{ grid-template-columns: 50px 1fr; gap:24px }
  .course-desc{ grid-column: 2; padding-top:12px }
  .add-services{ grid-template-columns:1fr }
  .book-feature{ grid-template-columns:1fr; gap:40px }
  .book-cover{ max-width:260px; margin:0 auto }
  .pub-list .pub-row{ grid-template-columns:1fr; gap:10px; padding:24px 12px }
  .pub-list .pub-source{ order:-1 }
  .pub-list .pub-ext{ display:none }
  .pub-list a.pub-row:hover{ padding-left:12px }
  .testimonial-track{ grid-template-columns:repeat(2, 1fr) }
  .contact-inner{ grid-template-columns:1fr; gap:60px }
  .competence-grid{ grid-template-columns:1fr }
  .value-grid{ grid-template-columns:1fr }
  .value-card{ min-height:auto }
  .book-teaser-grid{ grid-template-columns:1fr; gap:48px }
  .book-teaser-cover{ margin:0 auto; max-width:240px }
  .approach-grid{ grid-template-columns:1fr; gap:48px }
  .approach-aside{ position:static; border-left:none; border-top:1px solid var(--rule); padding-left:0; padding-top:32px }
  .collab-packages{ grid-template-columns:1fr }
  .collab-pkg{ min-height:auto }
}

@media (max-width: 768px){
  .nav-links{
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(320px, 85vw);
    background:var(--ink-2);
    border-left:1px solid var(--rule);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    padding:100px 32px 32px;
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
    z-index:48;
  }
  .nav-links.open{ transform:none }
  .nav-links a{
    width:100%;
    padding:18px 0;
    border-bottom:1px solid var(--rule-soft);
    font-family:var(--serif);
    font-size:22px;
    font-weight:300;
    letter-spacing:-.01em;
    color:var(--bone);
  }
  .nav-links a::after{ display:none }
  .nav-links .nav-cta{
    border:1px solid var(--ember);
    padding:14px 18px;
    margin-top:24px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ember);
    width:auto;
  }
  .nav-toggle{
    display:flex;
    align-items:center; justify-content:center;
    width:40px; height:40px;
    position:relative; z-index:52;
  }
  .nav-toggle.open .icon-open{ display:none }
  .nav-toggle.open .icon-close{ display:block }
  .nav-backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(4px);
    opacity:0; pointer-events:none;
    transition:opacity .35s ease;
    z-index:47;
  }
  .nav-backdrop.open{ opacity:1; pointer-events:auto }
}

@media (max-width: 640px){
  .wrap{ padding:0 22px }
  body{ font-size:17px }
  .hero{ padding:130px 0 80px; min-height:auto }
  .hero h1{ font-size:clamp(40px, 13vw, 72px); overflow-wrap:break-word; }
  .hero-sub{ font-size:18px }
  .hero-meta{ flex-wrap:wrap; gap:10px; margin-bottom:32px }
  .hero-meta .line{ display:none }
  .hero-cta-row{ flex-direction:column; align-items:stretch; gap:12px }
  .hero-cta-row .btn{ justify-content:center; width:100% }
  .scroll-hint{ display:none }
  .values-list li{ font-size:20px; padding:14px 0 }
  .page-hero{ padding:140px 0 60px }
  .page-hero h1{ font-size:34px; hyphens:auto; -webkit-hyphens:auto; word-break:break-word; overflow-wrap:break-word; }
  .page-hero-lead{ font-size:18px }
  section{ padding:72px 0 }
  .section-head{ margin-bottom:48px }
  .section-title{ font-size:34px; max-width:none }
  .manifesto-lead{ font-size:22px }
  .manifesto-body p{ font-size:16px }
  .manifesto-lead .drop{ font-size:4em }
  .person{ padding:48px 0 }
  .person-portrait{ max-width:200px }
  .portrait-initial{ font-size:90px }
  .person-name{ font-size:34px }
  .person-role{ font-size:18px; margin-bottom:24px }
  .person-bio{ font-size:16px; line-height:1.7 }
  .competence h4{ font-size:13px }
  .competence p{ font-size:15px; line-height:1.65 }
  .formats{ grid-template-columns:1fr }
  .format{ min-height:auto; padding:32px 24px }
  .format p{ font-size:15px }
  .courses-header{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:40px }
  .courses-header h3{ font-size:28px }
  .course{ padding:28px 0; gap:16px; grid-template-columns:40px 1fr }
  .course:hover{ padding-left:0 }
  .course-title{ font-size:20px }
  .course-desc{ font-size:15px; line-height:1.7 }
  .add-svc{ padding:36px 28px; min-height:auto }
  .add-svc h4{ font-size:22px }
  .add-svc p{ font-size:15px; line-height:1.7 }
  .value-card{ padding:36px 28px }
  .value-card h3{ font-size:22px }
  .value-card p{ font-size:16px }
  .approach-text p{ font-size:16px }
  .approach-text .approach-lead{ font-size:21px }
  .approach-list li{ font-size:17px }
  .collab-pkg{ padding:36px 28px }
  .collab-pkg h3{ font-size:24px }
  .collab-pkg-body{ font-size:15px }
  .collab-intro{ font-size:18px }
  .page-hero-note{ padding:18px 20px; font-size:14px }
  .book-teaser-cover{ max-width:200px; transform:rotate(-1deg) }
  .book-teaser-cover:hover{ transform:rotate(-1deg) }
  .book-teaser-body h2{ font-size:36px }
  .book-teaser-lead{ font-size:18px }
  .approach-quote{ font-size:23px; max-width:none }
  .approach-quote-mark{ font-size:120px; height:50px }
  .book-feature{ padding:20px 0 60px; margin-bottom:60px; gap:40px }
  .book-cover{ max-width:220px; transform:rotate(-1deg) }
  .book-title-cover{ font-size:28px }
  .book-info h3{ font-size:32px }
  .book-info .subtitle{ font-size:18px }
  .book-info p{ font-size:16px }
  .book-meta{ grid-template-columns:1fr; gap:4px }
  .book-meta dt{ margin-top:12px }
  .book-meta dt:first-child{ margin-top:0 }
  .pub-list .pub-row{ padding:20px 8px }
  .pub-list .pub-title{ font-size:18px; line-height:1.4 }
  .pub-list a.pub-row:hover{ padding-left:8px }
  .testimonial-track{ grid-template-columns:1fr; gap:16px }
  .testimonial{ padding:28px 24px }
  .testimonial p{ font-size:17px }
  .testimonial::before{ font-size:48px; top:8px; right:18px }
  .contact{ padding:80px 0 }
  .contact-inner{ gap:48px }
  .contact-left h2{ font-size:44px }
  .contact-left p{ font-size:17px }
  .contact-email{ font-size:20px; gap:10px }
  .contact-form{ padding:32px 22px }
  footer{ padding:56px 0 36px; margin-top:24px }
  .footer-bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
  }
  .footer-bottom .footer-email{ font-size:15px }
  .footer-company-block{ gap:4px }
  .book-cover:hover{ transform:rotate(-1deg) }
  .testimonial:hover{ transform:none; border-color:var(--rule-soft) }
  .chip{ font-size:15px; padding:20px 16px; min-height:auto }
  .chip:hover{ background:var(--ink-2); color:var(--bone); border-color:var(--rule-soft) }
}

@media (max-width: 360px){
  .wrap{ padding:0 18px }
  .hero h1{ font-size:36px }
  .section-title{ font-size:30px }
  .contact-left h2{ font-size:38px }
  .nav{ padding:16px 0 }
  .brand-logo{ height:36px }
}

/* Print styles */
@media print{
  .nav, .nav-backdrop, footer, .contact-form, .scroll-hint{ display:none }
  body{ background:white; color:black }
  body::before, body::after{ display:none }
  .hero{ padding:20px 0; min-height:auto }
}

::selection{ background:var(--ember); color:var(--ink) }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:1px solid var(--ember);
  outline-offset:3px;
}