:root{ --hero-image:none;--green:#253d34;--deep:#172e27;--cream:#f5f3ec;--lime:#d4e59b;--ink:#263c33;--muted:#71786f }
*{ box-sizing:border-box }
html{ scroll-behavior:smooth;scroll-padding-top:100px }
body{ margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px }
a{ color:inherit;text-decoration:none }
button,input,textarea,select{ font:inherit }
button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent }
button{ cursor:pointer }
header{ height:108px;padding:0 5.5%;display:flex;align-items:center;justify-content:space-between;background:var(--deep);color:white }
header .brand{ height:92px;width:170px;display:flex;align-items:center }
.brand img{ width:140px;height:90px;object-fit:contain }
nav{ display:flex;gap:36px;font-size:14px }
nav a:hover{ color:var(--lime) }
.navcta{ border:1px solid #ffffff55;padding:15px 21px;border-radius:3px;font-size:14px }
.navcta span{ margin-left:28px }
.hero{ position:relative;min-height:690px;color:white;display:flex;align-items:center;background:#243d32;overflow:hidden }
.heroimage{ position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,34,26,.91) 0%,rgba(15,34,26,.72) 38%,rgba(15,34,26,.12) 100%),var(--hero-image) center 58%/cover }
.hero-content{ position:relative;padding:65px 6% 100px;width:100% }
.eyebrow{ font-size:10px;letter-spacing:2px;font-weight:700;margin:0 0 28px;display:flex;align-items:center;gap:12px }
.eyebrow span{ width:6px;height:6px;background:var(--lime);border-radius:50% }
h1,h2,h3,p{ margin-top:0 }
h1,h2,h3{ font-family:Manrope,sans-serif }
h1{ font-weight:500;font-size:clamp(44px,5.3vw,78px);line-height:1.13;letter-spacing:-3.8px;margin-bottom:25px }
em{ font-style:normal;color:var(--lime) }
.intro{ line-height:1.8;color:#e3e7df;font-size:16px }
.actions{ display:flex;align-items:center;gap:34px;margin-top:36px }
.button{ background:var(--lime);color:var(--deep);border:0;border-radius:2px;display:inline-flex;justify-content:space-between;align-items:center;gap:38px;padding:19px 24px;font-size:13px;font-weight:700 }
.button:hover{ background:#e1efba }
.textlink{ font-size:13px;display:inline-flex;gap:24px;align-items:center;border-bottom:1px solid #a3aa9c;padding-bottom:7px }
.herofoot{ position:absolute;bottom:0;left:6%;right:6%;border-top:1px solid #ffffff38;padding:23px 0;display:flex;justify-content:space-between;font-size:11px;color:#dde4db }
.herofoot span:last-child{ letter-spacing:1.5px;font-size:9px }
.herofoot b{ font-size:20px;color:var(--lime);margin-left:16px }
.values{ display:flex;justify-content:space-between;padding:30px 6%;border-bottom:1px solid #d8ddd1;font-size:12px }
.values i{ font-style:normal;color:#859469 }
.section{ padding:100px 6% }
.sectionhead{ display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:46px }
.sectionhead>p,.sectionhead>div:last-child>p{ max-width:370px;line-height:1.8;color:var(--muted) }
h2{ font-size:clamp(34px,3.5vw,49px);font-weight:500;line-height:1.18;letter-spacing:-2px;margin-bottom:0 }
.section .eyebrow,.about .eyebrow{ color:#7c866e }
.servicegrid{ display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cbd1c2 }
.servicegrid article{ padding:30px 30px 0 0 }
.servicegrid article+article{ padding-left:30px;border-left:1px solid #cbd1c2 }
.number{ font-size:12px;color:#87917b;display:block;margin-bottom:40px }
h3{ font-size:20px;font-weight:500;letter-spacing:-.5px }
.servicegrid p{ color:var(--muted);line-height:1.8;font-size:14px;max-width:320px }
.servicegrid a{ font-size:12px;display:inline-block;margin-top:20px;border-bottom:1px solid #a1ab91;padding-bottom:9px }
.projects{ background:#e9ece2 }
.disclaimer{ font-size:11px;line-height:1.7!important;margin-bottom:0 }
.filters{ display:flex;gap:10px;margin-bottom:30px }
.filters button{ background:none;border:1px solid #bac3b1;color:var(--green);border-radius:30px;padding:10px 23px;font-size:12px }
.filters button.active{ background:var(--green);color:white;border-color:var(--green) }
.projectgrid{ display:grid;grid-template-columns:1.35fr 1fr;gap:28px }
.project{ text-align:left;padding:0;border:0;background:none;color:var(--green) }
.project img{ width:100%;height:370px;object-fit:cover;transition:filter .3s }
.project:hover img{ filter:brightness(.85) }
.project div{ padding-top:20px }
.project div>span{ font-size:9px;letter-spacing:1.8px;color:#7d876f }
.project h3{ margin:12px 0 0;font-size:23px;display:flex;justify-content:space-between }
.project b{ font-weight:400 }
.project[hidden]{ display:none }
.about{ display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:var(--cream) }
.aboutphoto{ min-height:580px;position:relative }
.aboutphoto img{ height:100%;width:100%;object-fit:cover;position:absolute;filter:brightness(.78) }
.aboutphoto span{ position:absolute;bottom:30px;left:12%;font-size:9px;letter-spacing:2px }
.abouttext{ padding:80px 12% }
.abouttext .eyebrow{ color:var(--lime);line-height:1.8 }
.abouttext h2{ margin-bottom:28px }
.abouttext>p:not(.eyebrow){ line-height:1.85;color:#c8d1c7;font-size:14px }
.abouttext .textlink{ margin-top:15px }
.signature{ border-top:1px solid #ffffff30;margin-top:40px;padding-top:25px;font-size:23px;letter-spacing:-1px }
.signature small{ display:block;font-size:8px;letter-spacing:2px;margin-top:8px;color:#adbca6 }
.process h2{ margin-bottom:50px }
.steps{ display:grid;grid-template-columns:repeat(3,1fr);gap:50px }
.steps span{ display:block;color:#869773;font-size:12px;padding-bottom:20px;border-bottom:1px solid #cbd1c2;margin-bottom:25px }
.steps p{ font-size:14px;line-height:1.8;color:var(--muted) }
.contact{ background:#e6eadc;display:grid;grid-template-columns:1fr 1fr;gap:8% }
.contact h2{ font-size:48px;margin-bottom:25px }
.contact em{ color:#7b8a54 }
.contact p{ line-height:1.8;color:#6c7664 }
.phone{ display:block;font-size:30px;margin:35px 0 15px }
.small{ display:block;font-size:11px;color:#6c7664;line-height:1.7 }
.formtabs{ display:flex;gap:26px;margin-bottom:30px }
.formtabs label{ display:flex;gap:8px;align-items:center;font-size:12px }
form>label,.formrow label{ display:flex;flex-direction:column;gap:10px;font-size:11px;margin-bottom:20px }
.formrow{ display:grid;grid-template-columns:1fr 1fr;gap:20px }
input:not([type=radio]),select,textarea{ border:0;border-bottom:1px solid #bbc3ad;border-radius:0;background:transparent;padding:12px 0;outline-offset:4px;color:var(--green);width:100%;font-size:14px }
input[type=radio]{ accent-color:var(--green) }
textarea{ resize:vertical }
form .button{ background:var(--green);color:white;width:100%;margin-top:10px }
form .button:hover{ background:var(--deep) }
footer{ padding:38px 6%;background:var(--deep);color:#dce3d5;display:flex;align-items:center;gap:40px;font-size:11px }
.footerbrand{ font-size:22px;font-weight:700;letter-spacing:-1px }
.footerbrand small{ font-size:11px }
footer p{ margin:0;flex:1;color:#a8b5a2 }
dialog{ border:0;padding:35px;max-width:650px;width:90%;background:var(--cream);color:var(--green) }
dialog::backdrop{ background:#10271ce0 }
dialog img{ width:100%;max-height:350px;object-fit:cover;margin-bottom:25px }
dialog h2{ margin-bottom:20px }
dialog p{ line-height:1.8 }
dialog .eyebrow{ font-size:9px }
.close{ position:absolute;right:15px;top:12px;border:0;background:var(--cream);border-radius:50%;width:35px;height:35px;font-size:25px }
#smsfallback{ padding-top:20px }
#smsfallback button{ padding:10px;background:var(--green);color:white;border:0 }
#copystatus{ font-size:12px;margin-left:10px }
@media(min-width:1600px){
  body{ max-width:1800px;margin:auto }
}
@media(max-width:800px){
  header{ height:85px;padding:0 6% }
  .brand img{ width:110px;height:75px }
  header .brand{ width:120px }
  nav{ gap:14px;font-size:11px }
  .navcta{ display:none }
  .hero{ min-height:640px }
  .heroimage{ background-position:65% center }
  .hero-content{ padding-top:40px }
  h1{ letter-spacing:-2px;font-size:49px }
  .hero .eyebrow{ font-size:8px;letter-spacing:1px }
  .actions{ gap:20px;flex-wrap:wrap }
  .herofoot span:last-child{ display:none }
  .values{ flex-wrap:wrap;gap:18px;font-size:10px }
  .values i{ display:none }
  .values span{ width:44% }
  .section{ padding:65px 6% }
  .sectionhead{ display:block }
  .sectionhead h2{ margin-bottom:25px }
  .servicegrid{ grid-template-columns:1fr }
  .servicegrid article,.servicegrid article+article{ padding:25px 0;border-left:0;border-bottom:1px solid #cbd1c2;padding-bottom:25px }
  .number{ margin-bottom:20px }
  .servicegrid a{ margin-top:5px }
  .projectgrid{ grid-template-columns:1fr }
  .project img{ height:300px }
  .about{ grid-template-columns:1fr }
  .aboutphoto{ min-height:350px }
  .abouttext{ padding:60px 6% }
  .steps{ grid-template-columns:1fr;gap:20px }
  .steps h3{ margin-bottom:10px }
  .contact{ grid-template-columns:1fr;gap:45px }
  .contact h2{ font-size:40px }
  footer{ flex-wrap:wrap;gap:20px }
  footer p{ flex-basis:100%;order:4 }
  .formtabs{ gap:16px }
  .formtabs label{ font-size:11px }
}
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ transition:none!important }
}

/* Aðgengi */
.skip{ position:absolute;left:-9999px;top:8px;background:var(--lime);color:var(--deep);padding:12px 18px;z-index:100;font-weight:700 }
.skip:focus{ left:8px }
:focus-visible{ outline:3px solid var(--lime);outline-offset:3px }
.section :focus-visible,.contact :focus-visible,dialog :focus-visible{ outline-color:var(--green) }
fieldset{ border:0;padding:0;margin:0 }
legend{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0) }
.project{ display:block }
.project div>span{ display:block }
/* Verkasafn: ítarlegt verk */
dialog .meta{ font-size:12px;color:var(--muted);margin:-8px 0 16px }
dialog .example{ font-size:12px;background:#e9ece2;padding:10px 14px;border-left:3px solid var(--green) }
.thumbs{ display:flex;gap:10px;flex-wrap:wrap;margin:-10px 0 22px }
.thumbs button{ padding:0;border:2px solid transparent;background:none;width:76px;height:56px }
.thumbs button[aria-current=true]{ border-color:var(--green) }
.thumbs img{ width:100%;height:100%;object-fit:cover;margin:0;max-height:none }
.empty{ color:var(--muted);line-height:1.8 }
.nojs{ padding:30px 6%;background:#e9ece2 }
@media(min-width:801px){ .projectgrid.many{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) } }