/* AGRO design system, Galdrasmiðjan 2026 */
:root{
  --paper:#f2efe6;
  --paper-2:#e9e5d7;
  --ink:#11291b;
  --ink-soft:#3c5546;
  --pine:#0e2b1a;
  --pine-2:#123723;
  --grass:#2f9e52;
  --grass-bright:#72d688;
  --lime:#c8e86a;
  --line:rgba(17,41,27,.14);
  --card:#faf8f1;
  --radius:20px;
  --navh:110px;
  --font-display:"Young Serif",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-label:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  overflow-x:clip;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--navh);
}
::selection{background:var(--lime);color:var(--pine)}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- preloader ---------- */
#loader{position:fixed;inset:0;z-index:200;background:var(--pine);display:flex;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.76,0,.24,1)}
#loader.gone{transform:translateY(-101%)}
#loader .mark{font-family:var(--font-label);letter-spacing:.42em;color:var(--grass-bright);font-size:15px;text-transform:uppercase;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
html:not(.js) #loader{display:none}

/* ---------- scroll progress ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--grass),var(--lime));z-index:150}

/* ---------- nav: solid light bar matching agro.is ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(242,239,230,.92);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--navh);max-width:1280px;margin:0 auto;padding:0 24px;gap:20px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:88px;width:auto}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:15px;font-weight:600;color:var(--ink-soft);transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--grass)}
.nav-links a.active{color:var(--grass)}
.nav-cta{
  font-family:var(--font-label);font-size:13.5px;font-weight:700;letter-spacing:.04em;
  background:var(--pine);color:var(--paper)!important;padding:11px 20px;border-radius:999px;
  transition:background .2s,transform .2s;
}
.nav-cta:hover{background:var(--grass);transform:translateY(-1px)}
#burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
#burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.3s}
#mobile-menu{display:none}
@media(max-width:1020px){
  :root{--navh:84px}
  .logo img{height:64px}
  .nav-links{display:none}
  #burger{display:block}
  #mobile-menu{
    display:block;position:fixed;top:var(--navh);left:0;right:0;z-index:99;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:12px 24px 24px;transform:translateY(-130%);transition:transform .35s cubic-bezier(.76,0,.24,1);
  }
  #mobile-menu.open{transform:translateY(0)}
  #mobile-menu a{display:block;padding:13px 0;text-decoration:none;font-size:17px;font-weight:600;border-bottom:1px solid var(--line)}
  #mobile-menu a:last-child{border:0}
  body.menu-open #burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open #burger span:nth-child(2){opacity:0}
  body.menu-open #burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;border:0;
  font-family:var(--font-label);font-weight:700;font-size:15px;letter-spacing:.03em;
  padding:16px 30px;border-radius:999px;transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--lime);color:var(--pine)}
.btn-solid:hover{background:var(--grass-bright);transform:translateY(-2px)}
.btn-pine{background:var(--pine);color:var(--paper)}
.btn-pine:hover{background:var(--grass);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--paper);border:1.5px solid rgba(242,239,230,.45)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}

/* ---------- index hero ---------- */
#hero{position:relative;min-height:calc(100svh - var(--navh));display:flex;align-items:center;overflow:clip;background:var(--pine)}
#lawn{position:absolute;inset:0;width:100%;height:100%}
#hero .shade{position:absolute;inset:0;background:
  linear-gradient(105deg,rgba(8,24,14,.82) 0%,rgba(8,24,14,.55) 42%,rgba(8,24,14,.1) 75%);
  pointer-events:none}
.hero-inner{position:relative;z-index:3;max-width:1280px;margin:0 auto;padding:56px 24px 88px;width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr;padding-top:40px}}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-label);font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grass-bright);border:1px solid rgba(114,214,136,.4);border-radius:999px;padding:9px 18px;
  background:rgba(14,43,26,.45);backdrop-filter:blur(4px);
}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 1.6s infinite}
#hero h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(40px,5.6vw,78px);line-height:1.14;letter-spacing:-.015em;
  color:var(--paper);margin:24px 0 20px;max-width:14ch;
}
#hero h1 em{font-style:normal;color:var(--grass-bright)}
.hero-sub{font-size:clamp(16px,1.5vw,18.5px);color:rgba(242,239,230,.82);max-width:52ch;margin-bottom:30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:0;margin-top:44px;flex-wrap:wrap}
.hero-stat{padding:0 30px;border-left:1px solid rgba(242,239,230,.22)}
.hero-stat:first-child{padding-left:0;border-left:0}
.hero-stat b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.3vw,30px);color:var(--paper);line-height:1.25}
.hero-stat span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,230,.6);font-family:var(--font-label);font-weight:600}
@media(max-width:640px){.hero-stat{padding:10px 20px 10px 0;border-left:0}}
/* hero product plate: robot canvas passes behind it */
.hero-plate{
  position:relative;z-index:2;background:var(--card);border-radius:26px;
  padding:34px 30px 26px;transform:rotate(2deg);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
}
.hero-plate img{width:100%;height:auto;mix-blend-mode:multiply}
.hero-plate .tag{
  display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);
  margin-top:18px;padding-top:14px;font-family:var(--font-label);
}
.hero-plate .tag b{font-size:15px;letter-spacing:.06em}
.hero-plate .tag span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grass)}
.hero-plate::after{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:120px;height:24px;background:rgba(200,232,106,.85);border-radius:4px;opacity:.9;
}
@media(max-width:980px){.hero-plate{max-width:420px;margin:10px auto 0}}
.scroll-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(242,239,230,.55);font-family:var(--font-label);font-size:11px;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint::after{content:"";width:1px;height:30px;background:linear-gradient(rgba(242,239,230,.55),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- subpage hero ---------- */
.page-hero{background:linear-gradient(160deg,var(--pine),var(--pine-2));color:var(--paper);padding:80px 0 70px;position:relative;overflow:clip}
.page-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 80px,rgba(114,214,136,.05) 80px 160px)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,5vw,64px);line-height:1.14;max-width:18ch;margin-top:22px}
.page-hero p.lead{font-size:clamp(16px,1.5vw,19px);color:rgba(242,239,230,.8);max-width:56ch;margin-top:18px}
.page-hero .kicker{margin-top:0}
.crumbs{font-family:var(--font-label);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,230,.55);margin-bottom:18px}
.crumbs a{color:rgba(242,239,230,.75);text-decoration:none}
.crumbs a:hover{color:var(--lime)}

/* ---------- marquee ---------- */
#brands{background:var(--pine);border-top:1px solid rgba(242,239,230,.12);padding:22px 0;overflow:clip}
.marquee{display:flex;width:max-content;animation:slide 28s linear infinite}
@media (prefers-reduced-motion:reduce){.marquee{animation:none}}
.marquee span{
  font-family:var(--font-label);font-size:14px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(242,239,230,.55);padding:0 34px;white-space:nowrap;display:flex;align-items:center;gap:34px;
}
.marquee span i{font-style:normal;color:var(--grass-bright)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- generic sections ---------- */
section{padding:100px 0}
.sec-label{
  font-family:var(--font-label);font-size:13px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--grass);display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.sec-label::before{content:"";width:34px;height:1.5px;background:var(--grass)}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4vw,50px);line-height:1.16;letter-spacing:-.01em;max-width:24ch}
.sec-intro{font-size:clamp(16px,1.5vw,18.5px);color:var(--ink-soft);max-width:60ch;margin-top:20px}
.dark-sec .sec-label{color:var(--lime)}
.dark-sec .sec-label::before{background:var(--lime)}
.dark-sec h2{color:var(--paper)}
.dark-sec .sec-intro{color:rgba(242,239,230,.72)}

/* ---------- FAQ ---------- */
.faq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:40px;margin-top:44px}
@media(max-width:900px){.faq-list{grid-template-columns:1fr;row-gap:32px}}
.faq-list h3{font-family:var(--font-display);font-weight:400;font-size:clamp(19px,2vw,23px);line-height:1.3;margin-bottom:10px;color:var(--ink)}
.faq-list p{font-size:16px;color:var(--ink-soft);max-width:60ch}

/* reveals: gated on html.js so content renders without JS */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
html.js .reveal.is-on{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}

/* ---------- category tiles (index) ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
@media(max-width:1020px){.tile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tile-grid{grid-template-columns:1fr}}
.tile{
  position:relative;border-radius:var(--radius);overflow:clip;min-height:340px;display:flex;align-items:flex-end;
  text-decoration:none;color:var(--paper);isolation:isolate;
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(185deg,rgba(8,24,14,0) 30%,rgba(8,24,14,.85) 85%)}
.tile .tx{padding:26px}
.tile h3{font-family:var(--font-display);font-weight:400;font-size:25px;margin-bottom:6px}
.tile p{font-size:13.5px;color:rgba(242,239,230,.8);max-width:30ch}
.tile .arrow{
  position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  background:rgba(242,239,230,.14);backdrop-filter:blur(6px);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:17px;transition:background .25s,transform .25s;
}
.tile:hover .arrow{background:var(--lime);color:var(--pine);transform:rotate(-35deg)}

/* ---------- why cards ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
@media(max-width:1020px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr}}
.why-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1020px){.why-grid.cols-3{grid-template-columns:1fr}}
.why-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 28px;position:relative;transition:transform .3s,box-shadow .3s;
}
.why-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -22px rgba(14,43,26,.35)}
.why-card .num{font-family:var(--font-label);font-size:12.5px;font-weight:700;letter-spacing:.2em;color:var(--grass);margin-bottom:22px}
.why-card .ico{width:52px;height:52px;border-radius:14px;background:var(--pine);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.why-card .ico svg{width:26px;height:26px;stroke:var(--grass-bright);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why-card h3{font-family:var(--font-display);font-weight:400;font-size:21px;margin-bottom:10px;letter-spacing:0}
.why-card p{font-size:14.5px;color:var(--ink-soft)}

/* ---------- finder: compact, two sliders, product image ---------- */
#finder{background:var(--pine);color:var(--paper);border-radius:36px;margin:clamp(32px,5vw,64px) clamp(8px,2vw,28px) 0;padding:36px 0}
#finder h2{font-size:clamp(24px,3vw,34px);margin-bottom:4px}
.finder-box{display:grid;grid-template-columns:0.85fr 1.15fr;gap:40px;margin-top:22px;align-items:center}
@media(max-width:900px){.finder-box{grid-template-columns:1fr;gap:28px}}
.f-group{margin-bottom:16px}
.f-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.f-label{font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,239,230,.6)}
.f-val{font-family:var(--font-display);font-size:clamp(17px,1.6vw,21px);color:var(--lime)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--grass) var(--fill,20%),rgba(242,239,230,.18) var(--fill,20%));
  outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--lime);border:3px solid var(--pine);box-shadow:0 0 0 2px var(--lime);
}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--lime);border:3px solid var(--pine);box-shadow:0 0 0 2px var(--lime)}
.range-ends{display:flex;justify-content:space-between;font-family:var(--font-label);font-size:11px;font-weight:600;letter-spacing:.1em;color:rgba(242,239,230,.5);margin-top:8px}
.reco{
  background:rgba(242,239,230,.06);border:1px solid rgba(242,239,230,.16);border-radius:22px;
  padding:20px;position:relative;overflow:clip;
  display:grid;grid-template-columns:310px 1fr;gap:24px;align-items:center;
}
@media(max-width:900px){.reco{grid-template-columns:1fr}}
.reco-fig{
  background:linear-gradient(160deg,#ffffff,#f0ede1);border-radius:14px;
  height:280px;display:flex;align-items:center;justify-content:center;padding:10px;
  position:relative;overflow:clip;
}
.reco-fig img{max-height:100%;max-width:100%;object-fit:contain;mix-blend-mode:multiply;transform:translate(var(--imgshift,0),var(--imgshifty,0)) scale(var(--imgscale,1))}
.reco-fig.tag-patch::after{content:"";position:absolute;top:0;right:0;width:58%;height:50%;background:linear-gradient(160deg,#ffffff,#f0ede1);-webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 45%,transparent 72%);mask-image:radial-gradient(ellipse at 100% 0%,#000 45%,transparent 72%);pointer-events:none}
.reco::before{content:"";position:absolute;top:-70px;right:-70px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(200,232,106,.22),transparent 70%)}
.reco .tag{font-family:var(--font-label);font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.reco h3{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.16;margin-bottom:7px}
.reco .price{font-family:var(--font-label);font-size:16.5px;font-weight:600;color:var(--grass-bright);margin-bottom:18px}
.reco ul{list-style:none;display:grid;gap:9px;margin-bottom:22px}
.reco li{font-size:14px;color:rgba(242,239,230,.8);display:flex;gap:9px;align-items:baseline}
.reco li::before{content:"✓";color:var(--lime);font-weight:700}
.reco .btn{padding:12px 24px;font-size:13.5px}

/* ---------- product catalog (slátturóbotar page) ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
@media(max-width:1020px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.prod-grid{grid-template-columns:1fr}}
.prod-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:640px){.prod-grid.cols-2{grid-template-columns:1fr}}
.mach{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s;
}
.mach:hover{transform:translateY(-6px);box-shadow:0 26px 48px -24px rgba(14,43,26,.4)}
.mach .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.mach .brand{font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--grass)}
.mach .stock{font-family:var(--font-label);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:rgba(47,158,82,.12);color:var(--grass);padding:5px 11px;border-radius:99px}
.mach .stock.order{background:rgba(17,41,27,.08);color:var(--ink-soft)}
.mach .fig{
  height:280px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  background:linear-gradient(160deg,#ffffff, #f0ede1);border:1px solid var(--line);border-radius:14px;position:relative;overflow:clip;padding:10px;
}
.mach .fig img{max-height:100%;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .45s cubic-bezier(.22,1,.36,1);transform:translate(var(--imgshift,0),var(--imgshifty,0)) scale(var(--imgscale,1))}
.mach:hover .fig img{transform:translate(var(--imgshift,0),var(--imgshifty,0)) scale(calc(var(--imgscale,1) * 1.06))}
/* linermarker-fig: outdoor photo, not a white-background product shot, so skip the multiply blend used elsewhere */
.mach .fig.linermarker-fig img{mix-blend-mode:normal;object-fit:cover;height:100%;width:100%}
/* photo-fig: generic version of the above for any outdoor/in-use product photo (used on velar-og-taeki.html) */
.mach .fig.photo-fig img{mix-blend-mode:normal;object-fit:cover;height:100%;width:100%}
/* t1200pro source photo has a yellow sticker baked into the top-right corner, patch it out with a matching corner */
#t1200pro .fig::after{content:"";position:absolute;top:0;right:0;width:58%;height:50%;background:#fbfaf6;-webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 45%,transparent 72%);mask-image:radial-gradient(ellipse at 100% 0%,#000 45%,transparent 72%);pointer-events:none}
.mach h3{font-family:var(--font-display);font-weight:400;font-size:24px;margin-bottom:4px}
.mach .use{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px}
.mach .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.mach .chips span{font-family:var(--font-label);font-size:11.5px;font-weight:600;letter-spacing:.04em;border:1px solid var(--line);border-radius:99px;padding:6px 12px;color:var(--ink-soft)}
.mach details.specs{margin-bottom:22px;border:1px solid var(--line);border-radius:12px;overflow:clip}
.mach details.specs summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;font-family:var(--font-label);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.mach details.specs summary::-webkit-details-marker{display:none}
.mach details.specs summary::after{content:"+";font-size:16px;font-weight:400;line-height:1;flex-shrink:0}
.mach details.specs[open] summary::after{content:"\2212"}
.mach details.specs .spec-list{padding:0 14px 14px;display:flex;flex-direction:column;gap:7px}
.mach details.specs .row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding-top:7px;border-top:1px solid var(--line)}
.mach details.specs .row:first-child{border-top:0;padding-top:0}
.mach details.specs .row span:first-child{color:var(--ink-soft);flex-shrink:0}
.mach details.specs .row span:last-child{font-weight:600;text-align:right}
.mach .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px}
.mach .foot.solo{justify-content:flex-end}
.mach .price{font-family:var(--font-label);font-weight:700;font-size:17.5px}
.mach .price small{display:block;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.mach .go{
  font-family:var(--font-label);font-weight:700;font-size:13px;letter-spacing:.06em;
  background:var(--pine);color:var(--paper);padding:11px 20px;border-radius:999px;text-decoration:none;
  transition:background .2s,transform .2s;
}
.mach .go:hover{background:var(--grass);transform:translateY(-2px)}
.note{font-family:var(--font-label);font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);margin-top:22px}

/* ---------- stats band ---------- */
.stats-band{background:linear-gradient(160deg,var(--pine),var(--pine-2));color:var(--paper);border-radius:36px;margin:0 clamp(8px,2vw,28px);position:relative;overflow:clip}
.stats-band::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 80px,rgba(114,214,136,.05) 80px 160px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:44px 20px}}
.stat{text-align:center}
.stat b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(34px,4.2vw,54px);line-height:1.18;color:var(--lime)}
.stat span{display:block;margin-top:12px;font-family:var(--font-label);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,239,230,.65)}

/* ---------- feature split rows (subpages) ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px 0;border-top:1px solid var(--line)}
.feat:first-of-type{border-top:0}
.feat.flip .feat-fig{order:2}
@media(max-width:900px){.feat{grid-template-columns:1fr;gap:32px}.feat.flip .feat-fig{order:0}}
.feat-fig{border-radius:24px;overflow:clip;position:relative;background:linear-gradient(160deg,#ffffff,#f0ede1);border:1px solid var(--line)}
.feat-fig.photo{background:var(--pine)}
.feat-fig img{width:100%;height:100%;object-fit:cover;display:block}
.feat-fig.contain{padding:34px;display:flex;align-items:center;justify-content:center;min-height:320px}
.feat-fig.contain img{object-fit:contain;max-height:340px;width:auto;mix-blend-mode:multiply}
/* eco-fig: EcoBunker's source photo is close to square (600x536), which made it render much taller than the other feat photos; force it to the same aspect ratio as the 02/Vélar og tæki image (1000x662) so the two rows line up */
.feat-fig.eco-fig{aspect-ratio:1000/662}
/* lm-fig: the local Linermarker Pro photo (img/linermarker-pro.jpg) is portrait (480x528), which made the feat box render much taller than the neighbouring feat rows on ithrottasvaedi.html. Notandi merkti með skjáskoti nákvæmlega hvað ætti að skera af (lítið af himni að ofan, mjórri ræma af grasi að neðan), svo hlutfallið er stillt til að passa við það: aspect-ratio 480/409 heldur um 77% af upprunalegu hæðinni, og object-position:20% færir klippinguna svo meira er skorið af himninum en af grasinu að neðan */
.feat-fig.lm-fig{aspect-ratio:480/409}
.feat-fig.lm-fig img{object-position:center 20%}
.feat-tx .n{font-family:var(--font-label);font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--grass);margin-bottom:14px;text-transform:uppercase}
.feat-tx h3{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.18;margin-bottom:14px}
.feat-tx p{color:var(--ink-soft);font-size:15.5px;max-width:52ch;margin-bottom:18px}
.feat-tx .mini{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.feat-tx .mini span{font-family:var(--font-label);font-size:11.5px;font-weight:600;letter-spacing:.06em;border:1px solid var(--line);border-radius:99px;padding:6px 13px;color:var(--ink-soft)}
.feat-logo{height:34px;width:auto;margin-bottom:18px;mix-blend-mode:multiply}

/* ---------- logo grid (birgjar) ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
@media(max-width:900px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
.logo-cell{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;min-height:150px;padding:28px;
  transition:transform .3s,box-shadow .3s;
}
.logo-cell:hover{transform:translateY(-5px);box-shadow:0 22px 40px -22px rgba(14,43,26,.3)}
.logo-cell img{max-height:64px;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply}

/* ---------- values ---------- */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
@media(max-width:860px){.val-grid{grid-template-columns:1fr}}
.val{border-top:2px solid var(--pine);padding-top:26px}
.val .n{font-family:var(--font-label);font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--grass);margin-bottom:14px}
.val h3{font-family:var(--font-display);font-weight:400;font-size:23px;margin-bottom:10px}
.val p{font-size:14.5px;color:var(--ink-soft)}
.quote{
  margin-top:80px;text-align:center;font-family:var(--font-display);font-weight:400;
  font-size:clamp(22px,3vw,36px);line-height:1.25;color:var(--pine);max-width:26ch;margin-left:auto;margin-right:auto;
}
.quote small{display:block;margin-top:22px;font-family:var(--font-label);font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--grass)}

/* ---------- big photo band ---------- */
.photo-band{border-radius:36px;overflow:clip;margin:0 clamp(8px,2vw,28px);position:relative;min-height:420px}
.photo-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-band .ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,24,14,.75) 10%,rgba(8,24,14,.15) 70%)}
.photo-band .tx{position:relative;z-index:1;padding:70px clamp(24px,6vw,80px);color:var(--paper);max-width:640px}
.photo-band h3{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.2vw,42px);line-height:1.18;margin-bottom:14px}
.photo-band p{color:rgba(242,239,230,.85);font-size:16px;margin-bottom:24px}

/* ---------- contact ---------- */
#samband{background:var(--pine);color:var(--paper);border-radius:36px 36px 0 0;margin:0 clamp(8px,2vw,28px) 0;padding-bottom:90px}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;margin-top:56px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:44px}}
.c-row{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid rgba(242,239,230,.14)}
.c-row:first-child{padding-top:0}
.c-ico{flex:0 0 46px;width:46px;height:46px;border-radius:13px;background:rgba(200,232,106,.12);display:flex;align-items:center;justify-content:center}
.c-ico svg{width:21px;height:21px;stroke:var(--lime);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c-row .lbl{font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,239,230,.55);margin-bottom:4px}
.c-row a,.c-row p{font-size:19px;font-weight:600;color:var(--paper);text-decoration:none}
.c-row a:hover{color:var(--lime)}
.contact-card{
  background:rgba(242,239,230,.05);border:1px solid rgba(242,239,230,.14);border-radius:24px;padding:40px;
  align-self:start;
}
.contact-card h3{font-family:var(--font-display);font-weight:400;font-size:26px;margin-bottom:12px}
.contact-card p{color:rgba(242,239,230,.72);font-size:15px;margin-bottom:26px}
.contact-card .btn{width:100%;justify-content:center;margin-bottom:12px}
.contact-card .btn-ghost{border-color:rgba(242,239,230,.3)}
/* newsletter mini-form, matches original's póstlisti */
.news{margin-top:26px;padding-top:22px;border-top:1px solid rgba(242,239,230,.14)}
.news .lbl{font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,239,230,.55);margin-bottom:12px}
.news form{display:flex;gap:10px}
.news input{
  flex:1;background:rgba(242,239,230,.08);border:1px solid rgba(242,239,230,.2);border-radius:999px;
  padding:12px 18px;color:var(--paper);font-family:var(--font-body);font-size:14px;outline:none;
}
.news input::placeholder{color:rgba(242,239,230,.4)}
.news input:focus{border-color:var(--lime)}
.news button{white-space:nowrap;padding:12px 22px;font-size:13.5px}

/* ---------- footer ---------- */
footer{background:var(--pine);color:rgba(242,239,230,.6);margin:0 clamp(8px,2vw,28px);border-top:1px solid rgba(242,239,230,.12)}
.foot{max-width:1200px;margin:0 auto;padding:34px 24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;align-items:center}
.foot a{color:rgba(242,239,230,.75);text-decoration:none}
.foot a:hover{color:var(--lime)}
.foot .credit a{color:var(--grass-bright)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--grass);outline-offset:3px}