:root{
    --bg:#FFF1EF;
    --charleston:#1E3309;
    --pink:#FCA9AA;
    --citron:#849A28;
    --koral:#FF6769;
    --placeholder:#FDDCDA;
    --line:rgba(30,51,9,.25);
    --serif:'Newsreader',Georgia,serif;
    --sans:'Atkinson Hyperlegible',system-ui,sans-serif;
    --script:'Meie Script',cursive;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} }
  body{background:var(--bg);color:var(--charleston);font-family:var(--sans);font-size:17px;line-height:1.65;}
  h1,h2,h3,h4{font-family:var(--serif);font-weight:300;color:var(--charleston);line-height:1.1;}
  a{color:inherit;text-underline-offset:3px;}
  a:focus-visible, button:focus-visible{outline:3px solid var(--charleston);outline-offset:3px;}
  .script{font-family:var(--script);font-weight:400;color:var(--pink);}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
  section{padding:96px 0;}
  .skip-link{position:absolute;left:-999px;top:0;background:var(--charleston);color:var(--bg);padding:12px 20px;z-index:200;}
  .skip-link:focus{left:16px;top:16px;}
  .eyebrow{font-family:var(--serif);font-style:italic;font-weight:700;font-size:23px;line-height:1.3;color:var(--charleston);}
  #hero .eyebrow{font-weight:400;font-size:22px;}
  .tag{display:inline-block;font-family:var(--sans);font-size:15px;color:var(--charleston);background:transparent;border:1px solid var(--line);border-radius:20px;padding:4px 12px;margin:0 6px 6px 0;}
  header{position:sticky;top:0;z-index:50;background:rgba(255,241,239,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
  header .wrap{display:flex;justify-content:space-between;align-items:center;height:68px;}
  .brand{font-family:var(--serif);font-weight:400;font-size:22px;}
  nav ul{display:flex;gap:30px;list-style:none;}
  nav a{text-decoration:none;font-family:var(--sans);font-size:19px;color:var(--charleston);padding-bottom:4px;border-bottom:3px solid transparent;}
  nav a:hover, nav a[aria-current="true"]{border-bottom-color:var(--citron);}
  .navtoggle{display:none;background:none;border:none;font-size:1.4rem;color:var(--charleston);cursor:pointer;}
  #hero{padding:80px 0 100px;}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
  .hero-name{font-size:clamp(60px,7vw,101px);font-weight:300;line-height:.92;margin-top:12px;}
  .hero-role{font-family:var(--serif);font-style:italic;font-weight:400;font-size:23px;line-height:1.35;color:var(--charleston);margin-top:16px;}
  .hero-intro{max-width:44ch;margin-top:22px;font-family:var(--serif);font-size:clamp(20px,1.8vw,25px);line-height:1.5;color:var(--charleston);}
  .btn-row{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
  .btn{
    font-family:var(--sans);font-size:16px;text-decoration:none;padding:12px 22px;
    border:1px solid var(--koral);border-radius:0;
  }
  .btn-solid{background:var(--koral);color:var(--bg);}
  .btn-solid:hover{background:var(--charleston);border-color:var(--charleston);}
  .btn-outline{color:var(--charleston);border-color:var(--charleston);}
  .btn-outline:hover{background:var(--charleston);color:var(--bg);}
  .portrait{width:100%;max-width:340px;margin-inline:auto;aspect-ratio:4/5;background:var(--placeholder);
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    color:var(--charleston);font-size:15px;text-align:center;}
  .hero-visual .portrait{background:transparent;border:none;}
  .sec-head{margin-bottom:44px;max-width:60ch;}
  .sec-head h2, #kontakt h2{font-size:clamp(38px,5.2vw,74px);font-weight:300;line-height:1.08;margin-top:10px;}
  hr.rule{border:none;border-top:1px solid var(--line);margin-top:20px;}
  #om-mig{background:var(--bg);}
  .om-mig-intro{max-width:62ch;font-family:var(--serif);font-size:clamp(20px,1.8vw,25px);line-height:1.5;color:var(--charleston);margin-bottom:52px;}
  .timeline{display:grid;gap:0;}
  .t-item{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line);}
  .t-item:last-child{border-bottom:1px solid var(--line);}
  .t-when{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--charleston);}
  .t-item h3{font-weight:400;font-size:27px;line-height:1.2;}
  .t-item p{font-size:17px;color:var(--charleston);margin-top:4px;}


  @media(max-width:640px){ .t-item{grid-template-columns:1fr;gap:4px;} }
  #kompetencer{background:var(--bg);}
  .comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 60px;}
  .comp-col h3.cat{font-family:var(--serif);font-style:italic;font-weight:300;font-size:35px;line-height:1.2;
    color:var(--charleston);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:24px;}
  .comp-item{margin-bottom:22px;}
  .comp-item h4{font-weight:400;font-size:22px;line-height:1.3;color:var(--charleston);}
  .comp-item p{font-size:17px;color:var(--charleston);margin-top:4px;}
  .tools{margin-top:36px;padding:32px;background:var(--charleston);color:var(--bg);box-shadow:0 0 0 100vmax var(--charleston);clip-path:inset(0 -100vmax);}
  .tools .label{font-family:var(--script);font-size:48px;line-height:1.1;color:var(--pink);display:block;margin-bottom:12px;}
  .tools p{font-size:17px;}
  .tools .note{display:block;margin-top:8px;font-size:15px;color:var(--bg);font-style:normal;}


  @media(max-width:700px){ .comp-grid{grid-template-columns:1fr;} }
  #projekter{background:var(--bg);}
  .case{
    display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
    padding:56px 0;border-top:1px solid var(--line);
  }
  .case:last-of-type{border-bottom:1px solid var(--line);}
  .case h3{font-size:clamp(58px,8vw,128px);font-weight:300;line-height:.9;margin-top:8px;}
  .case .case-num{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--charleston);}
  .case-challenge{margin-top:16px;font-size:17px;color:var(--charleston);max-width:48ch;}
  .placeholder-note{font-size:15px;font-style:italic;color:var(--charleston);border:1px solid var(--line);padding:12px;margin-top:16px;}
  .before-after{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
  .ba-block img, .ba-block .ph{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);background:var(--placeholder);}
  .ba-block .ph{display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;color:var(--charleston);padding:10px;}
  .ba-label{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--charleston);margin-bottom:6px;}
  .ba-caption{font-size:15px;color:var(--charleston);margin-top:6px;}
  .case-meta{margin-top:22px;font-size:17px;}
  .case-meta strong{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--charleston);margin-bottom:4px;}
  .case-links{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:17px;}
  .case-links a{text-decoration:underline;color:var(--charleston);}


  @media(max-width:800px){ .case{grid-template-columns:1fr;} }
  #kontakt{background:var(--charleston);color:var(--bg);padding-bottom:64px;}
  #kontakt h2, #kontakt .eyebrow{color:var(--bg);}
  #kontakt .script{font-family:var(--script);font-size:48px!important;line-height:1.2;color:var(--pink);}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px;}
  .contact-item{font-size:17px;border-top:1px solid rgba(255,241,239,.25);padding-top:12px;}
  .contact-item span{display:block;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--bg);margin-bottom:6px;}
  .contact-item a{color:var(--bg);text-decoration:underline;}
  #kontakt a:focus-visible{outline-color:var(--bg);}
  footer{padding:32px 24px;font-size:15px;color:var(--bg);display:flex;justify-content:space-between;
    background:var(--charleston);box-shadow:0 0 0 100vmax var(--charleston);clip-path:inset(0 -100vmax);
    border-top:1px solid rgba(255,241,239,.25);}

    @media(max-width:640px){ .contact-grid{grid-template-columns:1fr;} }
  
  
    @media(max-width:820px){
    section{padding:64px 0;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{order:-1;}
    nav ul{
      position:fixed;top:68px;left:0;right:0;background:var(--bg);
      flex-direction:column;padding:20px 24px;gap:18px;border-bottom:1px solid var(--line);
      transform:translateY(-130%);transition:transform .2s ease;
    }
    nav ul.open{transform:translateY(0);}
    .navtoggle{display:block;}
  }
  .case > div:nth-child(2){background:var(--placeholder);padding:9% 8%;
    display:flex;flex-direction:column;justify-content:center;}
  .case > div:nth-child(2):has(> .ba-block){aspect-ratio:4/3;}
  .case .ba-block img.portrait{display:block;width:100%;max-width:none;margin:0;
    aspect-ratio:16/10;object-fit:cover;object-position:top;background:#fff;
    border:1px solid var(--line);border-top:18px solid var(--bg);
    box-shadow:0 24px 48px -24px rgba(30,51,9,.45);}
  .case > div:nth-child(2):has(> .before-after){padding:6%;}
  .case .before-after{margin-top:0;gap:20px;align-items:start;}
  .case .ba-label{margin-bottom:8px;}
  .case .ba-caption{margin-top:10px;}
  
  
  @media(max-width:520px){ .case .before-after{grid-template-columns:1fr;} }
  .case:nth-of-type(even) > div:nth-child(2){order:-1;}
  
  
  @media(max-width:800px){ .case:nth-of-type(even) > div:nth-child(2){order:0;} }

  .cs-intro{padding-top:56px;padding-bottom:72px;}
  .cs-back{display:inline-block;font-family:var(--sans);font-size:16px;line-height:1.4;text-decoration:none;padding:12px 22px;background:var(--koral);color:var(--bg);border:1px solid var(--koral);border-radius:0;margin-bottom:32px;}
  .cs-back:hover,.cs-links a:hover{background:var(--charleston);border-color:var(--charleston);}
  .cs-title{font-size:clamp(58px,8vw,128px);font-weight:300;line-height:.9;margin-top:8px;}
  .cs-tags{margin-top:16px;}
  .cs-lead{max-width:58ch;margin-top:24px;font-family:var(--serif);font-size:clamp(20px,1.8vw,25px);line-height:1.5;}
  .cs-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px;}
  .cs-facts div{border-top:1px solid var(--line);padding-top:12px;}
  .cs-facts dt{font-family:var(--serif);font-style:italic;font-size:17px;margin-bottom:4px;}
  .cs-facts dd{font-size:17px;}
  .cs-screens{padding-top:0;}
  .cs-h2{font-size:clamp(38px,5.2vw,74px);font-weight:300;line-height:1.08;margin:10px 0 48px;text-wrap:balance;}
  .cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start;}
  .cs-shot{margin:0 0 20px;background:var(--placeholder);padding:28px;aspect-ratio:3/4;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;}
  .cs-shot img{display:block;width:100%;max-width:100%;border:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(30,51,9,.45);}
  .cs-num{font-family:var(--serif);font-style:italic;font-size:17px;}
  .cs-item h3{font-weight:400;font-size:27px;line-height:1.2;margin:6px 0 10px;}
  .cs-item p:last-child{font-size:17px;}
  .cs-identity{padding-top:24px;}
  .cs-text{max-width:62ch;font-size:17px;}
  .cs-swatches{display:flex;flex-wrap:wrap;gap:24px;list-style:none;margin-top:28px;}
  .cs-swatches li{display:flex;align-items:center;gap:10px;font-size:15px;}
  .cs-swatches span{width:44px;height:44px;border:1px solid var(--line);}
  .cs-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px;font-size:17px;}
  .cs-links a{display:inline-block;font-family:var(--sans);font-size:16px;line-height:1.4;text-decoration:none;padding:12px 22px;background:var(--koral);color:var(--bg);border:1px solid var(--koral);border-radius:0;}
  @media(max-width:900px){ .cs-grid{grid-template-columns:1fr;max-width:520px;} .cs-facts{grid-template-columns:1fr;gap:16px;} }
  .case > div:nth-child(2):has(> .teaser){aspect-ratio:4/3;padding:9% 14% 0;justify-content:flex-end;overflow:hidden;}
  .teaser{flex:1;min-height:0;background:#fff;border:1px solid var(--line);border-bottom:none;box-shadow:0 24px 48px -24px rgba(30,51,9,.45);overflow:hidden;}
  .teaser img{display:block;width:100%;height:auto;}