/* ============================================
   WhiteFloor Consulting — design tokens
   ============================================ */
:root{
  --paper:      #F5F3EE;
  --paper-dim:  #ECE9E1;
  --line:       #D9D5C9;
  --ink:        #16233A;   /* deep blueprint navy */
  --ink-soft:   #3A537A;
  --charcoal:   #1C1B18;
  --pencil:     #83807A;
  --accent:     #63C6AE;   /* WhiteFloor brand teal */
  --accent-soft:#E3F5F0;
  --accent-deep:#4F9E8B;   /* teal, hover/pressed state */

  --display: 'Instrument Serif', serif;
  --body:    'Inter', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --max: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1em; }
em{ font-family:var(--display); font-style:italic; color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* ============================================
   Grid overlay — the blueprint floor
   ============================================ */
.grid-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.35;
}

/* ============================================
   Header
   ============================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,243,238,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{
  width:38px; height:38px; border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink);
}
.logo-text{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; line-height:1.3; text-transform:uppercase; color:var(--charcoal); }
.logo-text em{ font-family:var(--mono); font-style:normal; color:var(--pencil); font-size:11px; }

.main-nav ul{
  list-style:none; display:flex; gap:30px; margin:0; padding:0;
  font-family:var(--mono); font-size:13px; letter-spacing:.03em;
}
.main-nav a{ color:var(--charcoal); position:relative; padding-bottom:3px; }
.main-nav a:hover{ color:var(--ink); }
.main-nav a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.main-nav a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-cta{
  border:1px solid var(--accent); padding:7px 14px; color:var(--ink) !important;
}
.nav-cta:hover{ background:var(--accent); color:var(--paper) !important; }
.nav-toggle{ display:none; }

.lang-switch a{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--pencil); border:1px solid var(--line); padding:5px 10px;
  display:inline-block; text-transform:uppercase;
}
.lang-switch a:hover{ color:var(--ink); border-color:var(--accent); }

/* ============================================
   Hero
   ============================================ */
.hero{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto;
  padding:120px 32px 140px;
  min-height:78vh;
  display:flex; align-items:center;
}
.hero-plan{ position:absolute; inset:32px; pointer-events:none; }
.plan-coord{
  position:absolute; font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; color:var(--pencil); text-transform:uppercase;
}
.plan-coord.tl{ top:0; left:0; }
.plan-coord.tr{ top:0; right:0; }
.plan-coord.bl{ bottom:0; left:0; }
.plan-coord.br{ bottom:0; right:0; }
.hero-plan::before, .hero-plan::after,
.hero-plan .plan-coord.tl::before{ content:''; }
.hero-plan{ border:1px solid var(--line); }

.hero-inner{ max-width:680px; }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:22px;
}
.hero h1{
  font-family:var(--body); font-weight:700; font-size:clamp(40px,6vw,68px);
  line-height:1.05; letter-spacing:-.01em; color:var(--charcoal); margin-bottom:28px;
}
.hero h1 em{ font-size:1.02em; }
.hero-lede{ font-size:18px; color:var(--ink-soft); max-width:52ch; margin-bottom:36px; }

.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:.03em;
  padding:14px 26px; border:1px solid var(--accent); display:inline-block;
  transition:background .2s ease, color .2s ease;
}
.btn-primary{ background:var(--accent); color:var(--paper); }
.btn-primary:hover{ background:var(--accent-deep); }
.btn-ghost{ color:var(--ink); }
.btn-ghost:hover{ background:var(--accent); color:var(--paper); }

/* ============================================
   Section head + room tags (shared)
   ============================================ */
.section-head{ max-width:640px; margin:0 auto 56px; padding:0 32px; text-align:left; }
.room-label{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.section-head h2, .about-copy h2, .contact h2{
  font-family:var(--body); font-weight:700; font-size:clamp(30px,4vw,44px);
  color:var(--charcoal); margin-bottom:14px; letter-spacing:-.01em;
}
.section-head p{ color:var(--ink-soft); font-size:17px; margin:0; }
.room-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); display:inline-block; margin-bottom:16px;
}

/* ============================================
   Room cards (used inside .detail-cards)
   ============================================ */
.room{
  border-right:1px solid var(--charcoal); border-bottom:1px solid var(--charcoal);
  padding:36px 30px; background:var(--paper);
  transition:background .25s ease;
}
.room:hover{ background:var(--paper-dim); }
.room-tag{ color:var(--accent); }
.room h3{
  font-family:var(--body); font-weight:700; font-size:23px; margin-bottom:12px;
}
.room p{ color:var(--ink-soft); font-size:15px; margin-bottom:22px; }

/* ============================================
   About
   ============================================ */
.about{ position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:20px 32px 130px; }
.about-grid{ display:grid; grid-template-columns:320px 1fr; gap:80px; align-items:start; }
.about-portrait{ position:relative; }
.about-portrait img{
  border:1px solid var(--charcoal); filter:grayscale(45%);
}
.caption{ font-family:var(--mono); font-size:12px; color:var(--pencil); margin-top:12px; }
.about-copy h2{ margin-bottom:24px; }
.about-copy p{ color:var(--ink-soft); font-size:16px; max-width:60ch; }
.link-underline{
  font-family:var(--mono); font-size:13px; color:var(--ink); border-bottom:1px solid var(--accent);
  padding-bottom:2px; display:inline-block; margin-top:10px;
}
.link-underline:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================
   Clients
   ============================================ */
.clients{
  position:relative; z-index:1; max-width:var(--max); margin:0 auto;
  padding:0 32px 130px; text-align:center;
}
.clients .room-tag{ display:block; margin-bottom:34px; }
.client-logos{
  list-style:none; margin:0; padding:0; display:flex; align-items:center;
  justify-content:center; flex-wrap:wrap; gap:56px 64px;
}
.client-logos img{ max-height:44px; width:auto; filter:grayscale(100%); opacity:.55; transition:opacity .2s ease, filter .2s ease; }
.client-logos img:hover{ filter:grayscale(0%); opacity:1; }

/* ============================================
   Contact
   ============================================ */
.contact{
  position:relative; z-index:1; background:var(--accent); color:var(--paper);
  padding:130px 32px;
}
.contact-inner{ max-width:640px; margin:0 auto; text-align:center; }
.contact .room-tag{ color:var(--accent-soft); }
.contact h2{ color:var(--paper); margin-bottom:20px; }
.contact h2 em{ color:var(--accent-soft); }
.contact p{ color:#C7D0DE; font-size:17px; margin-bottom:44px; }
.contact-details{
  display:flex; flex-direction:column; gap:14px; align-items:center;
  font-family:var(--mono); font-size:15px;
}
.contact-details a:hover{ color:var(--accent-soft); }

/* ============================================
   Footer
   ============================================ */
.site-footer{ position:relative; z-index:1; border-top:1px solid var(--line); }
.footer-inner{
  max-width:var(--max); margin:0 auto; padding:26px 32px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-family:var(--mono); font-size:12px; color:var(--pencil);
}
.footer-inner nav{ display:flex; gap:22px; }
.footer-inner a:hover{ color:var(--ink); }

/* ============================================
   Subpages — shared page hero
   ============================================ */
.page-hero{
  position:relative; z-index:1; max-width:var(--max); margin:0 auto;
  padding:150px 32px 80px; border-bottom:1px solid var(--line);
}
.breadcrumb{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pencil); margin-bottom:22px;
}
.breadcrumb a:hover{ color:var(--ink); }
.page-hero h1{
  font-family:var(--body); font-weight:700; font-size:clamp(36px,5.5vw,58px);
  line-height:1.08; letter-spacing:-.01em; color:var(--charcoal); margin-bottom:22px;
}
.page-hero-lede{ font-size:18px; color:var(--ink-soft); max-width:60ch; }

/* Prose content blocks */
.content{ position:relative; z-index:1; max-width:840px; margin:0 auto; padding:80px 32px; }
.content h2{
  font-family:var(--body); font-weight:700; font-size:clamp(26px,3.4vw,34px);
  margin:0 0 18px; letter-spacing:-.01em;
}
.content p{ color:var(--ink-soft); font-size:17px; max-width:68ch; }
.content .room-tag{ display:block; }
.content-block + .content-block{ margin-top:64px; padding-top:64px; border-top:1px solid var(--line); }

/* Service detail cards (agil-konsulent / projektledelse) */
.detail-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--charcoal); border-left:1px solid var(--charcoal);
  margin-top:16px;
}
.detail-cards .room{ padding:34px 30px; }

/* CV page */
.cv-skills{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 40px;
  margin-top:8px;
}
.skill{ display:grid; grid-template-columns:150px 1fr; align-items:center; gap:14px; font-family:var(--mono); font-size:12.5px; }
.skill-bar{ height:6px; background:var(--paper-dim); border:1px solid var(--line); position:relative; }
.skill-bar span{ position:absolute; inset:0; background:var(--accent); }

.cv-meta-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:16px;
}
.cv-meta-grid h4{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 12px;
}
.cv-meta-grid p{ font-size:15px; margin:0 0 6px; }

.timeline{ margin-top:10px; }
.timeline-item{
  padding:28px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:130px 1fr; gap:24px;
}
.timeline-item:last-child{ border-bottom:1px solid var(--line); }
.timeline-year{ font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:.04em; }
.timeline-role{ font-family:var(--body); font-weight:700; font-size:18px; margin-bottom:8px; }
.timeline-item p{ font-size:15px; color:var(--ink-soft); max-width:64ch; }

.cta-band{
  position:relative; z-index:1; background:var(--accent); color:var(--paper);
  padding:70px 32px; text-align:center;
}
.cta-band h2{ color:var(--paper); font-family:var(--body); font-weight:700; font-size:clamp(24px,3vw,32px); margin-bottom:20px; }
.cta-band .btn-primary{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cta-band .btn-primary:hover{ background:var(--accent-soft); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .about-portrait{ max-width:260px; }
}
@media (max-width:640px){
  .main-nav ul{
    position:fixed; top:0; right:0; height:100vh; width:78vw; max-width:320px;
    background:var(--paper); flex-direction:column; justify-content:center;
    padding:0 40px; gap:26px; font-size:16px;
    transform:translateX(100%); transition:transform .3s ease;
    border-left:1px solid var(--line);
  }
  .main-nav ul.open{ transform:translateX(0); }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; z-index:60;
  }
  .nav-toggle span{ width:22px; height:1.5px; background:var(--charcoal); }
  .hero{ padding:100px 24px 90px; min-height:auto; }
  .hero-plan{ display:none; }
  .about, .clients{ padding-left:24px; padding-right:24px; }
  .section-head{ padding-left:0; padding-right:0; }
  .client-logos{ gap:36px 40px; }
  .detail-cards{ grid-template-columns:1fr; }
  .cv-skills, .cv-meta-grid{ grid-template-columns:1fr; }
  .timeline-item{ grid-template-columns:1fr; gap:6px; }
  .page-hero{ padding:120px 24px 60px; }
  .content{ padding:60px 24px; }
}