/* ===== Visual Angle — kaitsevaldkonna kujundus (2026) ===== */

/* --- Põhitokenid --- */
:root{
  color-scheme: dark;
  --bg:#0b100c;
  --bg-alt:#0f150f;
  --surface:#111a12;
  --surface-soft:#121e14;
  --border:#1f2a1c;
  --text:#e6e8dc;
  --text-muted:#9aa48c;
  --accent:#9fb471;
  --accent-soft:rgba(159,180,113,.16);
  --accent-glow:0 12px 28px rgba(0,0,0,.38);

  --hero-photo:url("assets/img/photos/005_pmkremb/005_001.jpg");
  --hero-patch-img:url("assets/img/bg/hero/hero.svg");
  --hero-patch-interval:5200ms;
  --hero-patch-fade:900ms;
  --hero-patch-hold:120ms;
  --hero-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cdefs%3E%3Cpattern id='p' width='16' height='16' patternUnits='userSpaceOnUse'%3E%3Crect width='16' height='16' fill='none'/%3E%3Cpath d='M0 16 16 0M-4 12 4 20M12 -4 20 4' stroke='%23414c36' stroke-width='1' opacity='.55'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='96' height='96' fill='url(%23p)'/%3E%3C/svg%3E");
  --hero-blueprint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cdefs%3E%3Cpattern id='g' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Cpath d='M24 0H0V24' fill='none' stroke='%236a7555' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='140' height='140' fill='url(%23g)'/%3E%3C/svg%3E");
  --hero-card-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cdefs%3E%3Cpattern id='bp' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Cpath d='M24 0H0V24' fill='none' stroke='%239eb87a' stroke-width='1' opacity='.18'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='140' height='140' fill='url(%23bp)'/%3E%3Crect y='0' width='140' height='14' fill='rgba(12,20,16,0.12)'/%3E%3Crect y='126' width='140' height='14' fill='rgba(12,20,16,0.12)'/%3E%3Crect x='0' width='16' height='140' fill='rgba(12,20,16,0.12)'/%3E%3Cg stroke='%239eb87a' stroke-width='.12' opacity='.15'%3E%3Cline x1='0' y1='14' x2='140' y2='14'/%3E%3Cline x1='0' y1='126' x2='140' y2='126'/%3E%3Cline x1='16' y1='0' x2='16' y2='140'/%3E%3C/g%3E%3Cg fill='%23b7c894' font-family='Inter,Arial,sans-serif' font-size='7' opacity='.16' text-anchor='middle'%3E%3Ctext x='0' y='10'%3E0%3C/text%3E%3Ctext x='24' y='10'%3E24%3C/text%3E%3Ctext x='48' y='10'%3E48%3C/text%3E%3Ctext x='72' y='10'%3E72%3C/text%3E%3Ctext x='96' y='10'%3E96%3C/text%3E%3Ctext x='120' y='10'%3E120%3C/text%3E%3C/g%3E%3Cg fill='%23b7c894' font-family='Inter,Arial,sans-serif' font-size='7' opacity='.16' text-anchor='middle'%3E%3Ctext x='0' y='136'%3E0%3C/text%3E%3Ctext x='24' y='136'%3E24%3C/text%3E%3Ctext x='48' y='136'%3E48%3C/text%3E%3Ctext x='72' y='136'%3E72%3C/text%3E%3Ctext x='96' y='136'%3E96%3C/text%3E%3Ctext x='120' y='136'%3E120%3C/text%3E%3C/g%3E%3Cg fill='%23b7c894' font-family='Inter,Arial,sans-serif' font-size='7' opacity='.16' text-anchor='middle'%3E%3Ctext x='8' y='14' transform='rotate(-90 8 14)'%3E0%3C/text%3E%3Ctext x='8' y='38' transform='rotate(-90 8 38)'%3E24%3C/text%3E%3Ctext x='8' y='62' transform='rotate(-90 8 62)'%3E48%3C/text%3E%3Ctext x='8' y='86' transform='rotate(-90 8 86)'%3E72%3C/text%3E%3Ctext x='8' y='110' transform='rotate(-90 8 110)'%3E96%3C/text%3E%3Ctext x='8' y='134' transform='rotate(-90 8 134)'%3E120%3C/text%3E%3C/g%3E%3C/svg%3E");

  --radius:10px;
  --radius-sm:8px;
  --radius-lg:18px;
  --container:1120px;
  --gutter:1rem;
}

/* --- Baasstilid --- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Inter","Roboto","Segoe UI",system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(70% 45% at 15% 15%, rgba(159,180,113,.12), transparent 55%),
    radial-gradient(60% 40% at 85% 10%, rgba(82,92,62,.2), transparent 60%),
    linear-gradient(180deg, #0c120c 0%, #0c140d 36%, #0a0f0b 100%),
    var(--hero-blueprint);
  background-blend-mode:screen, screen, normal, soft-light;
  background-size:120% 120%, 140% 140%, 100% 100%, 420px 420px;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{
  font-weight:800;
  line-height:1.25;
  margin:0 0 .5rem;
  color:var(--text);
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.8rem, 4.6vw, 3.9rem);}
h2{font-size:clamp(1.9rem, 3vw, 2.6rem);}
h3{font-size:clamp(1.2rem, 2.1vw, 1.5rem);}
h4{font-size:clamp(1rem, 1.4vw, 1.1rem);}
p{margin:0 0 1rem;}
strong{font-weight:750; letter-spacing:-.01em;}
.text-accent{color:var(--accent);}
.container{width:min(var(--container),92%); margin-inline:auto;}
.muted{color:var(--text-muted);}
.small{font-size:.85rem;}

/* --- Klaviatuuri fookus --- */
:where(a,button,[role="button"],.btn,.tile,.portfolio-card,.nav-toggle,.brand):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

/* --- Jäta vahele link --- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.5rem .75rem;
  background:#000;
  color:#fff;
  z-index:1000;
}

/* --- Päis ja navigeerimine --- */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(180deg, rgba(13,18,13,.94), rgba(11,16,12,.9));
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(159,180,113,.18);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.7rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:800;
  color:var(--text-muted);
  text-decoration:none;
}
.brand:hover{color:var(--accent);}
.logo{
  height:42px;
  display:inline-grid;
  place-items:center;
}
.site-nav ul{
  display:flex;
  gap:1.1rem;
  list-style:none;
  padding:0;
  margin:0;
}
.site-nav a{
  color:var(--text-muted);
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:color .18s ease;
}
.site-nav a:hover{color:var(--accent);}
.nav-toggle{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
}
.nav-toggle .bar{
  display:block;
  width:24px;
  height:2px;
  background:var(--text-muted);
  margin:5px 0;
  border-radius:6px;
}
@media (max-width:840px){
  .nav-toggle{display:block;}
  .site-nav{
    position:absolute;
    right:1rem;
    top:60px;
    background:var(--bg-alt);
    border:1px solid var(--border);
    padding:.6rem;
    border-radius:10px;
    box-shadow:0 18px 40px rgba(0,0,0,.6);
    transform-origin:top right;
    transform:scale(.96);
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
  }
  .site-nav.open{
    transform:scale(1);
    opacity:1;
    pointer-events:auto;
  }
  .site-nav ul{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* --- Nupud --- */
.btn{
  display:inline-block;
  padding:.7rem 1.1rem;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  cursor:pointer;
  background:linear-gradient(180deg, #96ad6b, #7f9257);
  color:#0a0f09;
  border:1px solid #6f7e51;
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition:box-shadow .18s ease, transform .14s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{
  box-shadow:0 12px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(-1px);
  border-color:#9fb471;
}
.btn:active{transform:translateY(0);}
.btn-ghost{
  background:rgba(17,25,17,.75);
  color:var(--accent);
  border:1px solid #6f7e51;
}

/* --- Kangelasplokk --- */
.hero{
  position:relative;
  color:var(--text);
  isolation:isolate;
  min-height:clamp(420px, 78vh, 640px);
  display:flex;
  align-items:stretch;
}
.hero-media{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 10% 20%, rgba(159,180,113,.12), transparent 60%),
    radial-gradient(90% 90% at 90% 60%, rgba(82,92,62,.32), transparent 68%),
    linear-gradient(130deg, #0d120d 0%, #0c110c 45%, #0a0f0a 100%),
    var(--hero-card-grid),
    var(--hero-photo);
  background-repeat:no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-size:120% 120%, 140% 140%, cover, auto, cover;
  background-position:0% 0%, 100% 100%, center, center, center right;
  background-attachment:scroll, scroll, fixed, scroll, fixed;
  filter:saturate(.94) contrast(1.02);
  opacity:.96;
}
@media (max-width:900px){
  .hero-media{
    background-attachment:scroll;
    background-size:160% 160%,160% 160%,cover,auto,cover;
    background-position:center top, center bottom, center, top left, center;
  }
}
.hero-content{
  position:relative;
  z-index:1;
  padding-block:clamp(3rem,7vw,5.5rem);
}
.hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.2rem);
  align-items:center;
}
@media (max-width:900px){
  .hero-layout{
    grid-template-columns:1fr;
    text-align:center;
  }
}
.hero-copy{max-width:32rem;}
@media (max-width:900px){
  .hero-copy{margin-inline:auto;}
}
.hero h1{
  font-size:clamp(3rem,5vw,4.2rem);
  line-height:1.15;
  margin:0 0 .8rem;
}
.hero-lead{
  font-size:1.1rem;
  max-width:34rem;
  margin:0 0 1.25rem;
  color:var(--text-muted);
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1.3rem;
}
@media (max-width:900px){
  .hero-meta{justify-content:center;}
}
.hero-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.22rem .7rem;
  border-radius:999px;
  border:1px solid rgba(159,180,113,.28);
  background:rgba(14,18,12,.8);
  color:var(--text-muted);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero-ctas{
  margin-top:.5rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
@media (max-width:900px){
  .hero-ctas{justify-content:center;}
}
.hero-visual{
  display:flex;
  justify-content:flex-end;
}
@media (max-width:900px){
  .hero-visual{
    justify-content:center;
    order:-1;
    margin-bottom:1.5rem;
  }
}
.hero-patch{
  position:relative;
  width:100%;
  aspect-ratio:1;
  background:
    radial-gradient(75% 75% at 40% 35%, rgba(159,180,113,.24), transparent 70%),
    linear-gradient(160deg, rgba(22,30,20,.95), rgba(10,13,10,.95));
  background-repeat:no-repeat, no-repeat;
  background-size:120%, 140%;
  background-position:center, center;
  border-radius:var(--radius-lg);
  border:1px solid rgba(159,180,113,.16);
  overflow:visible;
  box-shadow:0 24px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-patch::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:var(--hero-patch-img);
  background-repeat:no-repeat;
  background-size:60%;
  background-position:center;
  opacity:1;
  pointer-events:none;
  will-change:opacity;
  transition:opacity var(--hero-patch-fade,900ms) ease-in-out;
  z-index:0;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.38));
}
.hero-patch.is-fading-out::before{opacity:0;}
.hero-patch::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hero-card-grid);
  background-repeat:repeat;
  mix-blend-mode:screen;
  mask-image:radial-gradient(120% 120% at 50% 50%, #000 70%, transparent 100%);
  pointer-events:none;
  border-radius:inherit;
}
.hero-patch::after{z-index:1;}

/* --- Sektsioonid --- */
.section{
  padding:clamp(2.6rem,6vw,5rem) 0;
  margin:0;
}
.section + .section{border-top:1px solid rgba(159,180,113,.14);}
.section-alt{background:var(--bg-alt);}
.section-kontakt{background:var(--bg);}
.section-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:2.3rem;
  border-bottom:1px solid var(--border);
  padding-bottom:.6rem;
}
.section-header h2{margin:0;}
.section-line{
  flex:1;
  height:3px;
  max-width:90px;
  border-radius:3px;
  background:var(--accent);
  box-shadow:0 8px 18px rgba(0,0,0,.4);
}


/* --- Kaardid ja võrgud --- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--gutter);
}
.card{
  background:linear-gradient(180deg, var(--surface-soft), var(--surface));
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:0 12px 28px rgba(0,0,0,.3);
  transition:border-color .18s ease, box-shadow .22s ease, transform .16s ease, background .2s ease;
}
.card-head{margin-bottom:1rem;}
.card-body{
  padding:0 1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.card h3{
  margin:.1rem 0 .35rem;
  font-size:1.02rem;
  font-weight:750;
  letter-spacing:-.01em;
}
.card .meta{color:var(--text-muted);}
.card:hover{
  border-color:var(--accent);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  transform:translateY(-2px);
}
#teenused .card{
  cursor:default;
}
#teenused .card:hover{
  border-color:var(--border);
  box-shadow:none;
  transform:none;
}
.cards.vaartused{
  gap:2.3rem;
}
.cards.vaartused .card{
  position:relative;
  cursor:default;
  box-shadow:none;
  transform:none;
  padding:2.3rem 1rem 1.1rem;
}
.cards.vaartused .card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--accent);
  opacity:.7;
  border-radius:10px 10px 0 0;
  box-shadow:var(--accent-glow);
}
.cards.vaartused .val-icon{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:8px;
  background:#2a2a2a;
  border:1px solid var(--border);
  color:var(--accent);
  font-size:.9rem;
  font-weight:800;
  text-shadow:var(--accent-glow);
}
.card-media{
  position:relative;
  aspect-ratio:16 / 9;
  background-image:var(--bg, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#2a2a2a;
}
.card-media::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 -42px 64px rgba(0,0,0,.25);
}
.card-media .badge{
  position:absolute;
  top:.6rem;
  left:.6rem;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:.78rem;
  padding:.32rem .5rem;
  border-radius:6px;
  font-weight:800;
  letter-spacing:.02em;
  backdrop-filter:blur(2px);
}
.cards.guides .card-media .badge{
  left:auto;
  right:.6rem;
}
.ratio{aspect-ratio:16/9;}
.stretched-link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.card .btn{position:relative; z-index:2;}
.card:focus-within{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius);
}
.grid.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--gutter);
  align-items:start;
}

/* --- Horisontaalne galerii (portfoolio) --- */
.htrack-row{
  position:relative;
  display:block;
  overflow:visible;
}
.htrack{
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  gap:var(--gutter);
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:1rem 2.5rem;
  margin:0;
  width:100%;
}
.htrack::-webkit-scrollbar{display:none;}
.htrack:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:6px;
  border-radius:var(--radius);
}
.htrack .tile{
  position:relative;
  flex:0 0 auto;
  width:260px;
  max-width:320px;
  min-width:220px;
  scroll-snap-align:center;
}
@media (max-width:900px){
  .htrack .tile{
    flex:0 0 min(80%, 320px);
  }
}
.htrack-nav{
  width:48px;
  height:48px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.6);
  color:var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.htrack-prev{left:-1rem;}
.htrack-next{right:-1rem;}
.htrack-nav:hover,
.htrack-nav:focus-visible{
  background:rgba(0,0,0,.9);
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transform:translateY(-50%) scale(1.06);
  outline:none;
}

/* --- Portfoolio horisontaalriba --- */
.portfolio-row{
  position:relative;
  display:block;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
}
.portfolio-track{
  display:flex;
  gap:var(--gutter);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:.35rem 0; /* joonda kaartide serv konteineri servaga */
  margin:0;
  width:100%;
}
.portfolio-track::-webkit-scrollbar{display:none;}
.portfolio-track::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(159,180,113,.16) 0, transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(82,92,62,.18) 0, transparent 48%);
}
.portfolio-track:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:6px;
  border-radius:var(--radius);
}
.portfolio-track .portfolio-card{
  position:relative;
  flex:0 0 calc((100% - 2 * var(--gutter)) / 3);
  min-width:280px;
  aspect-ratio:4 / 5;
  scroll-snap-align:center;
  background:transparent;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 18px 36px rgba(0,0,0,.2);
  transition:transform .18s ease, box-shadow .2s ease;
}
.portfolio-track .portfolio-card:hover,
.portfolio-track .portfolio-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 20px 40px rgba(0,0,0,.28);
  outline:none;
}
@media (max-width:900px){
  .portfolio-track .portfolio-card{
    flex:0 0 min(80%, 320px);
  }
}
.portfolio-nav{
  width:auto;
  height:auto;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(159,180,113,.28);
  background:rgba(14,18,12,.85);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  backdrop-filter:blur(6px);
  box-shadow:0 0 0 4px var(--bg), 0 10px 24px rgba(0,0,0,.35);
}
.portfolio-prev{left:-1.2rem;}
.portfolio-next{right:-1.2rem;}
.portfolio-nav:hover,
.portfolio-nav:focus-visible,
.portfolio-nav.is-highlight{
  background:rgba(17,23,16,.95);
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 0 4px var(--bg), 0 16px 30px rgba(0,0,0,.45);
  transform:translateY(-50%) scale(1.06);
  outline:none;
}
.portfolio-nav svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:1.6;
  fill:none;
}
.portfolio-prev svg{transform:rotate(180deg);}

/* --- Protsessi ajajoon --- */
.process{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:2.3rem;
  counter-reset:step;
  position:relative;
}
.process::before{
  content:"";
  position:absolute;
  top:1.5rem;
  left:2.6rem;
  width:2px;
  height:calc(100% - 3rem);
  background:linear-gradient(to bottom, var(--accent) 0%, transparent 100%);
  opacity:.4;
  z-index:0;
}
.process li{
  position:relative;
  counter-increment:step;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2.3rem 1rem 1rem 1rem;
  color:var(--text);
  z-index:1;
}
.process li::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--accent);
  opacity:.7;
  border-radius:var(--radius) var(--radius) 0 0;
  box-shadow:var(--accent-glow);
}
.process li::after{
  content:counter(step);
  position:absolute;
  top:-1.4rem;
  left:1rem;
  width:42px;
  height:42px;
  border-radius:8px;
  background:#2a2a2a;
  border:1px solid var(--border);
  color:var(--accent);
  font:800 1rem "Inter", system-ui, sans-serif;
  display:grid;
  place-items:center;
  text-shadow:var(--accent-glow);
  z-index:2;
}
.process li strong{display:block;}
.process li p{margin:0;}
@media (min-width:900px){
  .process{grid-template-columns:1fr 1fr;}
  .process::before{
    left:50%;
    transform:translateX(-50%);
  }
  .process li:nth-child(odd){grid-column:1;}
  .process li:nth-child(even){grid-column:2;}
}

/* --- Tekst ploki ilmumisanimatsioon --- */
@media (prefers-reduced-motion: no-preference){
  .reveal,
  .process li{
    opacity:0;
    transform:translateY(12px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .reveal.is-visible,
  .process li.is-visible{
    opacity:1;
    transform:none;
  }
}

/* --- Minust sektsioon --- */
.about{
  display:grid;
  gap:1.8rem;
  align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .about{
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
  }
}
.about-media{text-align:center;}
.about-media figure{margin:0;}
.about-media img{
  width:260px;
  height:260px;
  object-fit:cover;
  object-position:center 10%;
  border-radius:50%;
  border:1px solid var(--border);
  background:#1b1b1b;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.about-media figcaption{
  margin-top:.75rem;
  color:var(--text-muted);
  font-size:.95rem;
  line-height:1.2;
}
.about-media figcaption strong{
  display:block;
  font-size:1.1rem;
  color:var(--text);
  font-weight:700;
}
.about-text p{margin-bottom:1rem;}

/* --- Kontaktivorm --- */
.contact{
  max-width:720px;
  margin-inline:auto;
}
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.contact-form label{
  display:grid;
  gap:.35rem;
  font-weight:600;
}
.contact-form input,
.contact-form textarea{
  font:inherit;
  padding:.8rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#0c0f11;
  color:var(--text);
}
.section:not(.section-kontakt) .contact-form input,
.section:not(.section-kontakt) .contact-form textarea{
  background:#0c0f11;
  border-color:#333;
}
.contact-form .full{grid-column:1/-1;}
.contact-details{
  margin:0 0 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  font-style:normal;
}
.contact-details span,
.contact-details a{
  display:inline-flex;
  align-items:center;
  padding:.26rem .55rem;
  border-radius:999px;
  border:1px solid rgba(159,180,113,.24);
  background:rgba(14,18,12,.65);
  color:var(--text-muted);
  font-size:.84rem;
  line-height:1.1;
  text-decoration:none;
}
.contact-details a:hover{color:var(--accent);}
.contact .privacy{
  margin:.4rem 0 0;
  color:var(--text-muted);
}
@media (max-width:640px){
  .contact-form{grid-template-columns:1fr;}
  .contact-form .full{grid-column:auto;}
}

/* --- Jalus --- */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--bg-alt);
}
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
  gap:1rem;
  flex-wrap:wrap;
}
.footer a,
.contact .privacy a{
  color:var(--text-muted);
  text-decoration:none;
}
.footer a:hover,
.contact .privacy a:hover{color:var(--accent);}

/* --- Projekti mosaiik (tiles) --- */
.tile{
  aspect-ratio:1 / 1;
  position:relative;
  border:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:transparent;
  cursor:pointer;
  display:block;
  transition:box-shadow .22s ease, transform .16s ease;
}
.tile::before{
  content:"";
  display:none;
}
.tile:hover{
  box-shadow:0 14px 28px rgba(0,0,0,.3);
  transform:translateY(-2px);
}
.tile:hover::before{
  opacity:.6;
}
.tile-preview{
  position:absolute;
  inset:0;
  z-index:0;
}
.tile-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .4s ease;
  border-radius:inherit;
}
.tile-preview img.is-svg{
  object-fit:contain;
  padding:14px;
  background:var(--surface);
  transform:scale(1);
}
.tile:hover img.is-svg{transform:scale(1.02);}
.tile:hover img{
  transform:scale(1.06);
}
.tile-title{
  position:absolute;
  inset:auto 0 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:2.4rem;
  padding:.65rem .85rem;
  text-align:center;
  color:#fff;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.85) 100%);
  backdrop-filter:blur(4px);
  z-index:2;
}
.tile-more{display:none;}
}

/* --- Portfoolio single-image cards --- */
.portfolio-card{
  position:relative;
  display:block;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(23,30,23,.9), rgba(12,16,12,.95));
  box-shadow:0 18px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.portfolio-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hero-card-grid);
  opacity:.35;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
}
.portfolio-card__media{
  position:absolute;
  inset:0;
  background:radial-gradient(120% 120% at 50% 30%, rgba(159,180,113,.2), transparent 60%), rgba(17,24,18,.9);
}
.portfolio-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
  transform:scale(1.02);
  transition:transform .35s ease;
}
.portfolio-card__media img.is-svg{
  object-fit:contain;
  padding:14px;
  background:var(--surface);
  transform:scale(1);
}
.portfolio-card:hover .portfolio-card__media img{
  transform:scale(1.05);
}
.portfolio-card:hover .portfolio-card__media img.is-svg{
  transform:scale(1.02);
}
.portfolio-card__title{
  position:absolute;
  inset:auto 0 0 0;
  padding:.65rem .85rem;
  text-align:center;
  color:#fff;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.04em;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.9) 100%);
  z-index:2;
}

/* --- Täisekraani galerii --- */
.fs-gallery{
  position:fixed;
  inset:0;
  z-index:4000;
  background:radial-gradient(circle at 15% 10%, rgba(114,233,197,.12) 0, transparent 55%),
             rgba(0,0,0,.96);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  padding:2rem 3rem;
}
.fs-gallery[hidden]{display:none;}
.fs-close{
  position:absolute;
  top:1.2rem;
  right:1.4rem;
  width:auto;
  height:auto;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 0 0 4px var(--bg), 0 16px 32px rgba(0,0,0,.55);
  transition:background .2s, transform .2s, box-shadow .2s, border-color .2s, color .2s;
}
.fs-close:hover{
  background:rgba(0,0,0,.85);
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 0 4px var(--bg), 0 20px 40px rgba(0,0,0,.65);
  transform:translateY(-2px);
}
.fs-close svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:1.6;
  fill:none;
}
.fs-track{
  flex:1;
  display:flex;
  gap:2.5rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
}
.fs-track.dragging{cursor:grabbing;}
.fs-track::-webkit-scrollbar{display:none;}
.fs-item{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.fs-item img{
  max-height:80vh;
  max-width:100%;
  object-fit:contain;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#050505;
  box-shadow:0 24px 60px rgba(0,0,0,.9);
}
.fs-meta{
  position:absolute;
  left:50%;
  bottom:1.4rem;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding:.45rem .9rem;
  border-radius:999px;
  background:rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  max-width:min(80vw,960px);
  text-align:center;
}
.fs-caption{margin:0; font-size:.95rem;}
.fs-author{margin:0; font-size:.8rem; color:var(--text-muted);}
.fs-hint{margin:0; font-size:.75rem; color:var(--text-muted); opacity:.9;}
.fs-meta p{
  transition:opacity .22s ease, transform .22s ease;
  will-change:opacity, transform;
}
.fs-meta .is-swapping{
  opacity:0;
  transform:translateY(6px);
}
.fs-meta .is-typing{
  position:relative;
}
.fs-meta .is-typing::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  width:1px;
  height:1.1em;
  background:rgba(255,255,255,.7);
  transform:translateY(-50%);
  animation:fsCaret .9s steps(1) infinite;
}
@keyframes fsCaret{
  50%{opacity:0;}
}
.fs-prev,
.fs-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  height:auto;
  padding:10px;
  border-radius:12px;
  background:rgba(0,0,0,.55);
  color:var(--text);
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:9000;
  backdrop-filter:blur(4px);
  box-shadow:0 0 0 4px var(--bg), 0 10px 24px rgba(0,0,0,.35);
  transition:background .2s, transform .2s, box-shadow .2s, border-color .2s, color .2s;
}
.fs-prev:hover,
.fs-next:hover,
.fs-prev:focus-visible,
.fs-next:focus-visible,
.fs-prev.is-highlight,
.fs-next.is-highlight{
  background:rgba(0,0,0,.85);
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 0 4px var(--bg), 0 16px 30px rgba(0,0,0,.45);
  transform:translateY(-50%) scale(1.06);
}
.fs-prev{ left:1.5rem; }
.fs-next{ right:1.5rem; }
.fs-prev svg,
.fs-next svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:1.6;
  fill:none;
}
.fs-prev svg{transform:rotate(180deg);}
@media (max-width:900px){
  .fs-gallery{padding:1.5rem 1rem 2.6rem;}
  .fs-track{gap:1.5rem;}
  .fs-item img{max-height:70vh;}
  .fs-meta{
    bottom:.9rem;
    padding:.35rem .7rem;
    border-radius:999px;
  }
}

/* --- Kontrastsus ja liikumine --- */
@media (prefers-contrast: more){
  .card{border-color:#666;}
  .section-header{border-color:#666;}
}
@media (forced-colors: active){
  *{forced-color-adjust:auto;}
  body{
    background:Canvas;
    color:CanvasText;
  }
  .site-header,
  .site-footer,
  .card{
    background:Canvas;
    color:CanvasText;
    border:1px solid ButtonText;
  }
  .btn,
  .nav-toggle,
  .fs-close{
    border:1px solid ButtonText;
    background:ButtonFace;
    color:ButtonText;
  }
  .card-media{border:1px solid ButtonText;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* --- Print --- */
@media print{
  @page{margin:12mm;}
  html{color-scheme:light;}
  body{
    background:#fff;
    color:#000;
    font:12pt/1.4 "Roboto", Arial, sans-serif;
  }
  .site-header,
  .site-footer,
  .hero,
  .hero-media,
  .hero-ctas,
  .section-line,
  .fs-gallery,
  .nav-toggle{display:none !important;}
  a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:10pt;
  }
  .container{
    width:100%;
    max-width:100%;
  }
  .section{padding:0;}
  .cards{grid-template-columns:1fr 1fr;}
  .card{
    break-inside:avoid;
    border:1px solid #aaa;
    background:#fff;
  }
  .card-media,
  .tile-title,
  .tile-more,
  .about-media{display:none;}
}

/* Privacy notice modal */
.consent[hidden] { display: none; }

.consent {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.consent-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.consent-panel {
  position: relative;
  width: min(720px, calc(100% - 24px));
  margin: 10vh auto;
  background: rgba(18, 22, 28, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  overflow: hidden;
}

.consent-head {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.consent-body {
  padding: 14px 16px;
  line-height: 1.55;
}

.consent-links {
  margin-top: 10px;
}

.consent-links a {
  color:var(--text-muted);
  color:var(--text-muted);
  text-decoration:none;
}

.consent-links a:hover{color:var(--accent);}

.consent-foot {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .consent-panel {
    margin: auto;
    width: calc(100% - 16px);
  }
}