/* ============================================================
       CSS VARIABLES & RESET
    ============================================================ */
    :root {
      --beige:    #F0EDE8;
      --red:      #9B1A2B;
      --dark:     #3F3F3F;
      --burgundy: #9B1A2B;
      --teal:     #2D5E71;
      --charcoal: #3F3F3F;
      --muted:    #8A8A8A;
      --border:   #DCDCDC;
      --white:    #FFFFFF;
      --grey-card: #3F3F3F;

      --serif: 'Inter', system-ui, sans-serif;
      --sans:  'DM Sans', system-ui, sans-serif;

      --max-w: 1200px;
      --nav-h: 64px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--sans);
      background: var(--beige);
      color: var(--dark);
      font-size: 16px;
      line-height: 1.6;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #3F3F3F;
    }

    /* Global 4px rounded corners on all box elements */
    .card, .service-card, .page-hero,
    [style*="border-radius:8px"], [style*="border-radius: 8px"],
    .contact-page input, .contact-page textarea, .contact-page select {
      border-radius: 14px !important;
    }
    .btn-outline, .btn-send, .nav-cta {
      border-radius: 4px;
    }

    img { max-width: 100%; display: block; }
    a   { text-decoration: none; color: inherit; }
    ul  { list-style: none; }

    /* ============================================================
       PAGES (SPA routing)
    ============================================================ */
    .page { display: none; }
    .page.active { display: block; }

    /* ============================================================
       NAV
    ============================================================ */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--nav-h);
      background: var(--beige);
      border-bottom: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      z-index: 100;
      transition: border-color .3s, background .3s;
    }
    nav.scrolled {
      border-color: var(--border);
      background: rgba(240,237,232,0.97);
      backdrop-filter: blur(8px);
    }

    .nav-logo {
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .nav-logo svg {
      height: 22px;
      width: auto;
      overflow: visible;
    }

    /* Stafir: litur fer í 50% opacity við hover — engin hreyfing */
    .nav-logo svg path[fill="#515151"] {
      transition: opacity .35s ease;
    }
    .nav-logo:hover svg path[fill="#515151"] {
      opacity: 0.5;
    }

    /* Rauða línan: hverfur við hover */
    .nav-logo svg path[fill="#9B1A2B"] {
      transition: opacity .35s ease;
    }
    .nav-logo:hover svg path[fill="#9B1A2B"] {
      opacity: 0;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 0;
    }
    .nav-links a {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--dark);
      padding: 8px 14px;
      position: relative;
      transition: color .2s;
    }
    .nav-links a::before { content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px; height: 1.5px; background: transparent; transition: background .2s; }
    .nav-links a::after {
      content: '|';
      position: absolute;
      right: 0;
      color: var(--border);
      font-weight: 300;
    }
    .nav-links a:last-child::after { display: none; }
    .nav-links a:hover { color: var(--red); }
    .nav-links a:hover::before { background: var(--red); }
    .nav-links a.active-link { color: var(--red); }

    .nav-cta {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid var(--dark);
      padding: 8px 18px;
      cursor: pointer;
      transition: background .2s, color .2s;
    }
    .nav-cta:hover { background: #9B1A2B; border-color: #9B1A2B; color: var(--white); }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      z-index: 200;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--dark);
      transition: all .3s;
    }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

    /* Mobile nav drawer */
    .mobile-nav {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--beige);
      z-index: 99;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 32px;
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav a {
      font-family: var(--serif);
      font-size: 32px;
      color: var(--dark);
      transition: color .2s;
    }
    .mobile-nav a:hover { color: var(--red); }
    .mobile-nav .mob-cta {
      margin-top: 16px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid var(--dark);
      padding: 10px 24px;
    }

    /* ============================================================
       HERO – FORSÍÐA
    ============================================================ */
    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background: var(--beige);
    }
    #hero-bgvideo {
      position: absolute;
      top: 50%; left: 50%;
      width: 177.78vh; height: 100vh;
      min-width: 100%; min-height: 56.25vw;
      transform: translate(-50%, -50%);
      object-fit: cover;
      z-index: 0;
      opacity: 0.18;
    }
    .hero-overlay { display: none; }
    .hero-content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 80px 60px 60px;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    

    .subpage-hero .hero-content {
      position: relative;
      z-index: 1;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 40px 50px;
      width: 100%;
    }

    .hero-content h1 {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: clamp(40px, 5.5vw, 72px);
      line-height: 1.1;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #3F3F3F;
      max-width: 520px;
      margin-bottom: 20px;
    }

    .hero-content p {
      font-size: 19px;
      color: var(--charcoal);
      max-width: 460px;
      line-height: 1.6;
      margin-bottom: 36px;
    }

    .btn-outline {
      display: inline-block;
      border: 1px solid var(--dark);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 12px 22px;
      cursor: pointer;
      transition: background .2s, color .2s;
    }
    .btn-outline:hover { background: #9B1A2B; border-color: #9B1A2B; color: var(--white); }

    /* Hreyfiborði — standalone */
    .ticker-standalone {
      overflow: hidden;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 12px 0;
      background: var(--beige);
      margin-bottom: 0;
    }
    .ticker-track {
      display: flex;
      gap: 60px;
      animation: ticker 24s linear infinite;
      white-space: nowrap;
    }
    .ticker-track span {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--muted);
    }
    @keyframes ticker {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ============================================================
       SERVICES CARDS
    ============================================================ */
    .services {
      display: grid;
      grid-template-columns: auto auto auto;
      justify-content: start;
      gap: 16px;
      margin: 60px 40px;
      max-width: var(--max-w);
      margin-left: auto;
      margin-right: auto;
      padding: 0 40px;
    }

    .service-card {
      padding: 40px 36px;
      cursor: pointer;
      border-radius: 14px;
      transition: transform .25s ease, filter .25s ease;
      position: relative;
      min-height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .service-card:hover {
      transform: translateY(-3px);
      filter: brightness(1.06);
    }

    .service-card.raadgjof  { background: #8A272F; }
    .service-card.innvidir  { background: #4B6574; }
    .service-card.fjarmognun { background: #3F3F3F; }

    .service-card h2 {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.02em;
      color: var(--white);
      text-decoration: none;
      margin-top: 16px;
      margin-bottom: 0;
    }
    .service-card-tag {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: none;
      color: rgba(255,255,255,0.65);
      margin-bottom: 12px;
    }
    .service-card-desc {
      font-size: 15px;
      line-height: 1.6;
      color: rgba(255,255,255,0.75);
      margin-top: 16px;
      margin-bottom: 0;
    }
    .service-card-tagline {
      font-size: clamp(10px, 1.1vw, 13px);
      font-weight: 600;
      color: rgba(255,255,255,0.6);
      margin-top: 16px;
      margin-bottom: 0;
      letter-spacing: 0.01em;
    }
    .service-card-btn {
      display: inline-block;
      margin-top: 24px;
      padding: 12px 20px;
      border: 1.5px solid rgba(255,255,255,0.5);
      color: var(--white);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
      text-decoration: none;
      transition: border-color .2s, background .2s;
    }
    .service-card-btn:hover {
      border-color: var(--white);
      background: rgba(255,255,255,0.1);
    }

    .service-label {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .06em;
      color: rgba(255,255,255,0.75);
      margin-top: 40px;
    }
    .service-label::after {
      content: '_';
      color: rgba(255,255,255,0.5);
    }

    /* ============================================================
       UM ARCUR – forsíða section
    ============================================================ */
    .about-section {
      max-width: var(--max-w);
      margin: 80px auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about-img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      filter: grayscale(100%) contrast(1.1);
    }

    /* Fjall mynd */
    .about-mountain-wrap {
      background: var(--beige);
      display: block;
      width: 100%;
      line-height: 0;
      font-size: 0;
    }
    .about-mountain-img {
      width: 100%;
      height: auto;
      display: block;
      mix-blend-mode: multiply;
      vertical-align: bottom;
      border: none;
      outline: none;
    }

    .about-text h2 {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: clamp(24px, 3vw, 36px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #3F3F3F;
      margin-bottom: 20px;
    }
    .about-text p {
      font-size: 15px;
      line-height: 1.75;
      color: var(--charcoal);
      margin-bottom: 28px;
    }
    .link-underline {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--dark);
      padding-bottom: 2px;
      transition: color .2s, border-color .2s;
    }
    .link-underline:hover { color: var(--red); border-color: var(--red); }

    /* ============================================================
       VERKEFNI LIST (shared)
    ============================================================ */
    .projects-list {
      max-width: var(--max-w);
      margin: 0 auto 80px;
      padding: 0 40px;
      border-top: 1px solid var(--border);
    }

    .project-item {
      text-decoration: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 22px 20px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      position: relative;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .project-item:first-child { border-top: 1px solid var(--border); }
    .project-item.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .project-item:nth-child(1) { transition-delay: 0s; }
    .project-item:nth-child(2) { transition-delay: 0.12s; }
    .project-item:nth-child(3) { transition-delay: 0.24s; }

    /* Hover: allt deyfist um 50% nema þessi lína */
    .projects-list:hover .project-item { opacity: 0.5; }
    .projects-list:hover .project-item:hover { opacity: 1; }

    .project-item h3 {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: clamp(16px, 1.8vw, 22px);
      font-weight: 500;
      color: #3F3F3F;
    }
    .project-item .date { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
    .project-item::after {
      content: '>';
      flex-shrink: 0;
      font-size: clamp(14px, 1.6vw, 20px);
      font-weight: 500;
      color: var(--dark);
      transition: transform 0.25s ease;
    }
    .project-item:hover::after {
      transform: translateX(10px);
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      background: var(--beige);
      border-top: 1px solid var(--border);
      padding: 60px 40px 40px;
      max-width: 100%;
    }

    .footer-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      align-items: start;
      gap: 48px;
    }

    .footer-brand .logo {
      margin-bottom: 12px;
      display: block;
    }
    .footer-brand .logo svg {
      height: 22px;
      width: auto;
    }
    .footer-brand .email {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .footer-social {
      display: flex;
      gap: 14px;
    }
    .footer-social a {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      color: var(--muted);
      transition: color .2s;
    }
    .footer-social a:hover { color: var(--dark); }

    .footer-logo { margin-bottom: 16px; }
    .footer-logo svg { height: 22px; width: auto; }
    .footer-address { font-size: 13px; color: var(--muted); line-height: 1.8; }
    .footer-address a { color: var(--muted); }
    .footer-address a:hover { color: var(--dark); }

    .footer-col h4 {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--dark);
      margin-bottom: 16px;
    }
    .footer-col a {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 8px;
      transition: color .2s;
    }
    .footer-col a:hover { color: var(--dark); }

    .footer-bottom {
      max-width: var(--max-w);
      margin: 40px auto 0;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: var(--muted);
    }

    /* ============================================================
       PAGE HERO (inner pages)
    ============================================================ */
    .page-hero {
      padding-top: var(--nav-h);
      padding-bottom: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 280px;
      position: relative;
      overflow: hidden;
    }
    .page-hero h1 {
      font-family: var(--serif);
      font-size: clamp(28px, 4vw, 56px);
      font-weight: 400;
      color: var(--white);
      position: relative;
      z-index: 1;
      max-width: 700px;
      line-height: 1.2;
    }
    .page-hero h1 .cursor {
      color: var(--red);
      animation: blink .8s step-end infinite;
    }
    @keyframes blink { 50% { opacity: 0; } }

    .page-hero-pattern {
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 12px,
        rgba(255,255,255,.04) 12px,
        rgba(255,255,255,.04) 14px
      ),
      radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: auto, 18px 18px;
    }

    /* ============================================================
       INNER PAGE LAYOUT
    ============================================================ */
    .inner-section {
      max-width: var(--max-w);
      margin: 80px auto;
      padding: 0 40px;
    }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .section-headline {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: clamp(24px, 3vw, 40px);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 0;
      color: #3F3F3F;
    }

    .feature-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .feature-item {
      background: #F7F4EF;
      border-radius: 6px;
      padding: 20px 24px;
    }
    .feature-item h4 {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .feature-item h4::before {
      content: '_';
      color: var(--red);
      margin-right: 2px;
    }
    .feature-item p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
    }

    /* ============================================================
       SERVICE CARDS GRID (inner pages)
    ============================================================ */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin: 60px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .card {
      background: transparent;
      border-radius: 0;
      padding: 36px 32px 36px 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      border-right: 1px solid var(--border);
      min-height: 0;
    }
    .card:first-child { padding-left: 0; }
    .card:last-child { border-right: none; padding-right: 0; }
    .card + .card { padding-left: 32px; }

    .card h3 {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.3;
      margin-bottom: 12px;
      color: var(--dark);
    }
    .card p {
      font-size: 14px;
      color: #666;
      line-height: 1.65;
      flex-grow: 1;
    }
    .card-img {
      width: 100%;
      height: 80px;
      object-fit: cover;
      filter: grayscale(100%) contrast(1.2);
      margin-top: 16px;
      border-radius: 3px;
    }

    /* Mountain placeholder for cards */
    .card-mountain {
      width: 100%;
      height: 70px;
      margin-top: 16px;
      opacity: .3;
      background: linear-gradient(180deg, transparent 0%, var(--border) 100%);
      clip-path: polygon(0% 100%, 20% 40%, 35% 60%, 50% 20%, 65% 55%, 80% 35%, 100% 100%);
    }

    /* ============================================================
       CASE STUDY BLOCKS (Verkefni)
    ============================================================ */
    .case-study {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      max-width: var(--max-w);
      margin: 0 auto 2px;
      min-height: 360px;
      overflow: hidden;
      border-radius: 8px;
    }
    .case-studies-wrap {
      padding: 0 40px;
      margin: 40px auto 80px;
    }
    .case-study:nth-child(even) .case-text { order: 2; }
    .case-study:nth-child(even) .case-img  { order: 1; }

    .case-text {
      padding: 60px 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--beige);
    }
    .case-text h2 {
      font-family: var(--serif);
      font-size: clamp(22px, 2.5vw, 32px);
      font-weight: 400;
      margin-bottom: 16px;
      line-height: 1.25;
    }
    .case-text p {
      font-size: 14px;
      color: var(--charcoal);
      line-height: 1.7;
      margin-bottom: 28px;
    }
    .case-img {
      min-height: 360px;
    }
    .case-img-bg {
      width: 100%;
      height: 100%;
      min-height: 360px;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 18px 18px;
    }
    .case-img-bg.dark    { background-color: var(--dark); }
    .case-img-bg.teal    { background-color: var(--teal); }
    .case-img-bg.burgundy { background-color: var(--red); }
    .case-img-photo {
      width: 100%;
      height: 100%;
      min-height: 360px;
      object-fit: cover;
      display: block;
    }

    /* ============================================================
       CLIENTS STRIP
    ============================================================ */
    .clients-strip {
      text-align: center;
      padding: 60px 40px;
      border-top: 1px solid var(--border);
    }
    .clients-strip p {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 28px;
    }
    .clients-logos {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 48px;
      flex-wrap: wrap;
    }
    .client-logo {
      font-family: var(--serif);
      font-size: 18px;
      color: var(--muted);
      letter-spacing: .04em;
      transition: color .2s;
    }
    .client-logo.byko {
      font-size: 22px;
      font-weight: 700;
      font-family: var(--sans);
    }
    .client-logo:hover { color: var(--dark); }

    /* ============================================================
       UM OKKUR – TEAM PAGE
    ============================================================ */
    .team-intro {
      max-width: var(--max-w);
      margin: 80px auto 60px;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
    }
    .team-intro h2 {
      font-family: var(--serif);
      font-size: clamp(20px, 2.5vw, 30px);
      font-weight: 400;
      margin-bottom: 12px;
    }
    .team-intro p { font-size: 14px; color: var(--charcoal); line-height: 1.7; }

    .contact-links { display: flex; flex-direction: column; gap: 6px; }
    .contact-links a {
      font-size: 14px;
      color: var(--dark);
      border-bottom: 1px solid var(--border);
      padding-bottom: 4px;
      transition: color .2s, border-color .2s;
      display: inline-block;
      width: fit-content;
    }
    .contact-links a:hover { color: var(--red); border-color: var(--red); }

    .team-grid {
      max-width: var(--max-w);
      margin: 0 auto 80px;
      padding: 0 40px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 60px 80px;
    }

    .team-member img {
      width: 100%;
      aspect-ratio: 3/4;
      object-fit: cover;
      filter: grayscale(100%) contrast(1.05);
      margin-bottom: 16px;
    }
    .team-member-placeholder {
      width: 100%;
      aspect-ratio: 3/4;
      background: #D8D4CE;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 12px;
    }
    .member-info {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
    .member-name {
      font-size: 16px;
      font-weight: 500;
    }
    .member-email {
      font-size: 12px;
      color: var(--muted);
      transition: color .2s;
    }
    .member-email:hover { color: var(--red); }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1024px) {
      .footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .footer-brand { grid-column: 1 / -1; }
      .cards-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-bridge-wrap { height: 58%; }
      .hero-content { padding: 0 40px 50px; }
    }

    @media (max-width: 900px) {
      nav { padding: 0 20px; }
      .nav-links, .nav-cta { display: none; }
      .hamburger { display: flex; }

      .hero-pattern { width: 100%; opacity: .12; }
      .hero-content { padding: 0 20px 50px; }
      .hero-bridge-wrap { height: 55%; }
      .hero-shapes { display: none; }

      .services { grid-template-columns: 1fr; padding: 0 20px; margin: 40px auto; }
      .service-card { min-height: 220px; }

      .about-section {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
        margin: 48px auto;
      }

      .projects-list { padding: 0 20px; }

      .inner-section { padding: 0 20px; margin: 48px auto; }
      .two-col { grid-template-columns: 1fr; gap: 40px; }
      .cards-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

      .case-study { grid-template-columns: 1fr; border-radius: 4px; }
      .case-studies-wrap { padding: 0 20px; }
      .case-study:nth-child(even) .case-text { order: unset; }
      .case-study:nth-child(even) .case-img  { order: unset; }
      .case-text { padding: 40px 24px; }
      .case-img { min-height: 240px; }
      .case-img-bg { min-height: 240px; }

      .team-intro { grid-template-columns: 1fr; gap: 32px; padding: 0 20px; margin: 48px auto 40px; }
      .team-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 0 20px; }

      footer { padding: 48px 20px 32px; }
      .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
      .footer-brand { grid-column: 1 / -1; border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-bottom: 8px; }
      .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

      .clients-strip { padding: 40px 20px; }
      .clients-logos { gap: 28px; }

      .page-hero { min-height: 200px; }
    }

    @media (max-width: 480px) {
      .cards-grid { grid-template-columns: 1fr; }
      .team-grid { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
      .footer-brand { grid-column: 1 / -1; }
      .hero-content h1 { font-size: 32px; }
      .hero-content { padding: 0 20px 50px; }
      .hero-bridge-wrap { height: 48%; }
    }

    /* ============================================================
       ANIMATIONS
    ============================================================ */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================================
       ÖLFUSÁRBRÚ PAGE — stats, timeline, results
    ============================================================ */
    .stats-grid { }
    @media (max-width: 768px) {
      .stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 24px !important; padding: 32px 20px !important; }
    }
    @media (max-width: 480px) {
      .stats-grid { grid-template-columns: 1fr 1fr !important; }
    }

    .stat-item { }
    .stat-num {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #3F3F3F;
      line-height: 1;
      margin-bottom: 6px;
    }
    .stat-num span {
      font-size: .45em;
      font-weight: 500;
      color: var(--muted);
      margin-left: 3px;
    }
    .stat-label {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .04em;
    }

    /* Timeline */
    .timeline-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
    }
    .timeline-item:last-child { border-bottom: none; }
    .timeline-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--dark);
      margin-top: 5px;
      flex-shrink: 0;
    }
    .timeline-date {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 3px;
    }
    .timeline-text {
      font-size: 13px;
      color: var(--charcoal);
      line-height: 1.55;
    }

    /* Results */
    .result-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      font-size: 14px;
      color: rgba(255,255,255,0.8);
      line-height: 1.55;
    }
    .result-item:last-child { border-bottom: none; }
    .result-icon {
      color: var(--red);
      font-size: 16px;
      margin-top: 1px;
      flex-shrink: 0;
    }

    /* ============================================================
       HAFA SAMBAND
    ============================================================ */
    .contact-page {
      padding-top: var(--nav-h);
    }

    .contact-hero {
      padding: 80px 40px 60px;
      max-width: var(--max-w);
      margin: 0 auto;
      border-bottom: 1px solid var(--border);
    }
    .contact-hero h1 {
      font-size: clamp(36px, 5vw, 72px);
      line-height: 1.05;
      letter-spacing: -0.03em;
      color: #3F3F3F;
      max-width: 600px;
      margin-bottom: 16px;
    }
    .contact-hero p {
      font-size: 16px;
      color: var(--muted);
      max-width: 440px;
      line-height: 1.65;
    }

    .contact-body {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 64px 40px 40px;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 100px;
      align-items: start;
    }

    /* Left col — info */
    .contact-info h3 {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .contact-info-item {
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .contact-info-item:first-of-type { border-top: 1px solid var(--border); }
    .contact-info-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 5px;
    }
    .contact-info-value {
      font-size: 15px;
      color: #3F3F3F;
      font-weight: 500;
    }
    .contact-info-value a {
      color: #3F3F3F;
      transition: color .2s;
    }
    .contact-info-value a:hover { color: var(--red); }

    .contact-social {
      display: flex;
      gap: 16px;
      margin-top: 32px;
    }
    .contact-social a {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
      padding-bottom: 2px;
      transition: color .2s, border-color .2s;
    }
    .contact-social a:hover { color: var(--dark); border-color: var(--dark); }

    /* Right col — form */
    .contact-form-wrap {}
    .contact-form-wrap h3 {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 28px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-group {
      margin-bottom: 20px;
    }
    .form-group label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--border);
      padding: 10px 0;
      font-family: var(--sans);
      font-size: 15px;
      color: #3F3F3F;
      outline: none;
      transition: border-color .25s;
      border-radius: 0;
      appearance: none;
      -webkit-appearance: none;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: #3F3F3F;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: #BDBDBD;
    }
    .form-group select {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%233F3F3F' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 4px center;
      padding-right: 24px;
    }
    .form-group textarea {
      resize: none;
      height: 100px;
      line-height: 1.6;
    }

    .form-submit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
    }
    .form-note {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
    }
    .btn-send {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #3F3F3F;
      color: var(--white);
      border: none;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 14px 28px;
      cursor: pointer;
      transition: background .2s, transform .15s;
      white-space: nowrap;
    }
    .btn-send:hover { background: #9B1A2B; }
    .btn-send:active { transform: scale(.98); }
    .btn-send svg { transition: transform .2s; }
    .btn-send:hover svg { transform: translateX(3px); }

    /* Success state */
    .form-success {
      display: none;
      text-align: center;
      padding: 60px 40px;
    }
    .form-success.visible { display: block; }
    .form-success h2 {
      font-size: 28px;
      margin-bottom: 12px;
      color: #3F3F3F;
    }
    .form-success p {
      color: var(--muted);
      font-size: 15px;
    }
    .success-icon {
      width: 48px;
      height: 48px;
      background: var(--red);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }

    @media (max-width: 768px) {
      .contact-hero { padding: 48px 20px 40px; }
      .contact-body {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 40px 20px 60px;
      }
      .form-row { grid-template-columns: 1fr; gap: 0; }
      .form-submit { flex-direction: column; gap: 20px; align-items: flex-start; }
    }

    /* ============================================================
       UNDIRSÍÐUR — Innviðir / Ráðgjöf / Sjóðir
    ============================================================ */

    .subpage-hero {
      height: 40vh;
      display: flex;
      align-items: stretch;
      position: relative;
      overflow: hidden;
      margin: 0;
    }
    .subpage-hero-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: calc(var(--nav-h) + 60px) 40px 60px;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 32px;
      position: relative;
      z-index: 2;
    }
    .subpage-hero h1 {
      font-size: clamp(16px, 3.2vh, 48px);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #fff;
      max-width: 60%;
      line-height: 1.05;
      margin: 0;
    }
    .subpage-hero-label {
      font-size: clamp(16px, 1.8vw, 22px);
      font-weight: 600;
      color: rgba(255,255,255,0.85);
      letter-spacing: 0.01em;
    }
    .subpage-hero-label span {
      color: #9B1A2B;
    }
    #page-radgjof .subpage-hero-label span,
    #page-fjarmognun .subpage-hero-label span {
      color: rgba(255,255,255,0.4);
    }
    .subpage-hero-img {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 55%;
      overflow: hidden;
      pointer-events: none;
    }
    .subpage-hero-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left bottom;
      mix-blend-mode: soft-light;
      opacity: 0.6;
      display: block;
    }
    /* Per-page hero colors */
    #page-innvidir .subpage-hero { background: #3F3F3F; }
    #page-radgjof  .subpage-hero { background: #9B1A2B; }
    #page-fjarmognun .subpage-hero { background: #2D5E71; }

    @media (max-width: 768px) {
      .subpage-hero { height: 40vh; min-height: unset; }
      .subpage-hero-inner { padding: calc(var(--nav-h) + 40px) 20px 48px; gap: 24px; }
      .subpage-hero h1 { font-size: clamp(22px, 7vh, 60px); max-width: 100%; }
      .subpage-hero-label { font-size: 16px; }
      .subpage-hero-img { width: 45%; opacity: 0.4; }
    }
    @media (max-width: 480px) {
      .subpage-hero-img { display: none; }
    }

    .subpage-section {
      background: var(--beige);
    }
    .subpage-body {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 80px 40px;
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 80px;
      align-items: start;
    }
    .subpage-left h2 {
      font-size: clamp(22px, 3vw, 36px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #3F3F3F;
      line-height: 1.2;
      position: sticky;
      top: calc(var(--nav-h) + 32px);
    }
    .subpage-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .subpage-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 36px 40px;
      transition: transform .2s;
    }
    .subpage-card:hover {
      transform: translateY(-2px);
    }
    .subpage-card-title {
      font-size: 17px;
      font-weight: 700;
      color: #3F3F3F;
      margin-bottom: 12px;
      letter-spacing: -0.01em;
    }
    .subpage-card-title span {
      color: #9B1A2B;
    }
    .subpage-card p {
      font-size: 15px;
      line-height: 1.7;
      color: #666;
      margin: 0;
    }

    @media (max-width: 768px) {
      .subpage-hero { padding: 60px 20px 40px; min-height: unset; }
      .subpage-body { grid-template-columns: 1fr; gap: 40px; padding: 48px 20px; }
      .subpage-left h2 { position: static; }
      .subpage-card { padding: 28px 24px; }
    }

    /* ============================================================
       LÓGÓLÍNA — rennandi merkjalína
    ============================================================ */
    .clients-section {
      background: var(--beige);
      padding: 48px 0;
      border-top: 1px solid var(--border);
      overflow: hidden;
    }
    .clients-label {
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      color: var(--muted);
      margin-bottom: 36px;
      font-family: 'Inter', sans-serif;
    }
    .clients-track-wrap {
      overflow: hidden;
      position: relative;
    }
    .clients-track {
      display: flex;
      align-items: center;
      gap: 80px;
      width: max-content;
      animation: ticker-scroll 22s linear infinite;
    }
    .clients-track:hover {
      animation-play-state: paused;
    }
    .clients-track img {
      height: 28px;
      width: auto;
      opacity: 0.4;
      filter: grayscale(100%);
      transition: opacity .2s;
      flex-shrink: 0;
    }
    .clients-track img:hover {
      opacity: 0.7;
    }
    @keyframes ticker-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-25%); }
    }

    /* Colored navigation on subpages */
    nav[data-page="innvidir"],
    nav[data-page="radgjof"],
    nav[data-page="fjarmognun"] {
      border-bottom-color: transparent;
    }
    
    nav[data-page="innvidir"] {
      background: #3F3F3F;
    }
    
    nav[data-page="radgjof"] {
      background: #9B1A2B;
    }
    
    nav[data-page="fjarmognun"] {
      background: #2D5E71;
    }
    
    nav[data-page="innvidir"] .nav-logo svg path,
    nav[data-page="radgjof"] .nav-logo svg path,
    nav[data-page="fjarmognun"] .nav-logo svg path {
      fill: white;
    }
    
    nav[data-page="innvidir"] .nav-links a,
    nav[data-page="radgjof"] .nav-links a,
    nav[data-page="fjarmognun"] .nav-links a {
      color: #fff;
    }
    
    nav[data-page="innvidir"] .nav-cta,
    nav[data-page="radgjof"] .nav-cta,
    nav[data-page="fjarmognun"] .nav-cta {
      color: #fff;
      border-color: rgba(255,255,255,0.5);
    }
    
    nav[data-page="innvidir"] .nav-links a:hover,
    nav[data-page="radgjof"] .nav-links a:hover,
    nav[data-page="fjarmognun"] .nav-links a:hover {
      color: rgba(255,255,255,0.7);
    }
    
    nav[data-page="innvidir"] .nav-cta:hover,
    nav[data-page="radgjof"] .nav-cta:hover,
    nav[data-page="fjarmognun"] .nav-cta:hover {
      background: rgba(255,255,255,0.1);
      border-color: #fff;
    }


    /* ASCII Bridge Animation */
    .ascii-bridge-container {
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      z-index: 1;
    }
    
    #page-innvidir .ascii-bridge-canvas {
      line-height: 1.05;
      letter-spacing: 0.06em;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.1);
      user-select: none;
      white-space: nowrap;
      font-family: 'Courier New', monospace;
      transform: scale(2.4);
      text-align: center;
    }
    
    #page-radgjof .ascii-bridge-canvas {
      line-height: 0.85;
      letter-spacing: 0.05em;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.12);
      user-select: none;
      white-space: nowrap;
      font-family: 'Courier New', monospace;
      transform: scale(2.4);
      text-align: center;
      margin-left: 10%;
    }
    
    #page-fjarmognun .ascii-bridge-canvas {
      line-height: 1.0;
      letter-spacing: 0.03em;
      font-size: min(2.1vw, 21px);
      color: rgba(0, 0, 0, 0.15);
      user-select: none;
      white-space: pre;
      font-family: 'Courier New', monospace;
      margin: 0;
      padding: 0;
      transform: scale(1.5);
    }
    
    @media (max-width: 768px) {
      #page-innvidir .ascii-bridge-canvas { font-size: 7px; transform: scale(1.8); }
      #page-radgjof .ascii-bridge-canvas { font-size: 10px; transform: scale(1.8); }
      #page-fjarmognun .ascii-bridge-canvas { font-size: 10px; }
    }


    /* Contact Page */
    .contact-page {
      padding-top: var(--nav-h);
    }



    .contact-grid {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 40px 80px;
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 80px;
    }

    .contact-info-item {
      margin-bottom: 40px;
    }

    .contact-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .contact-value {
      font-size: 16px;
      color: var(--dark);
    }

    .contact-social {
      margin-top: 48px;
      display: flex;
      gap: 24px;
    }

    .contact-social a {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--muted);
      text-decoration: none;
    }

    .contact-social a:hover {
      color: var(--dark);
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .form-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--dark);
    }

    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: var(--dark);
    }

    .contact-form textarea {
      resize: vertical;
      min-height: 120px;
    }

    .form-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      margin-top: 12px;
    }

    .form-note {
      font-size: 14px;
      color: var(--muted);
    }

    .btn-submit {
      padding: 14px 32px;
      background: var(--dark);
      color: white;
      border: none;
      border-radius: 4px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-submit:hover {
      opacity: 0.85;
    }

    @media (max-width: 768px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
      }
      
      .form-row-2 {
        grid-template-columns: 1fr;
      }
      
      .form-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
    }


    


    /* Article Page - New Layout */
    .article-page-new {
      min-height: 100vh;
    }

    .article-hero-dark {
      background: #3F3F3F;
      color: white;
      padding: 100px 40px 40px;
      margin-top: var(--nav-h);
    }

    .article-hero-container {
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .article-eyebrow {
      font-size: 14px;
      font-weight: 600;
      display: block;
      margin-bottom: 24px;
    }

    .article-hero-dark h1 {
      font-size: clamp(48px, 6vw, 72px);
      line-height: 1.15;
      font-weight: 700;
      color: white;
      max-width: 600px;
    }

    .article-intro-white {
      background: var(--beige);
      padding: 60px 40px 60px;
      text-align: center;
    }

    .article-intro-white p {
      max-width: 700px;
      margin: 0 auto;
      font-size: 20px;
      line-height: 1.6;
      font-weight: 400;
    }

    .article-stats-white {
      background: var(--beige);
      padding: 0 40px 80px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .stat-value {
      font-size: 48px;
      font-weight: 700;
      font-family: var(--serif);
      margin-bottom: 8px;
    }

    .stat-suffix {
      font-size: 20px;
      font-weight: 400;
      opacity: 0.6;
    }

    .stat-desc {
      font-size: 13px;
      color: var(--muted);
    }

    .article-main-grid {
      max-width: var(--max-w);
      margin: 80px auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
    }

    .article-text h2 {
      font-size: 28px;
      margin-bottom: 28px;
      line-height: 1.3;
    }

    .article-text p {
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .article-dark-image {
      background: #3F3F3F;
      padding: 24px;
      border-radius: 4px;
      margin-bottom: 24px;
    }

    .article-dark-image img {
      width: 100%;
      border-radius: 2px;
      margin-bottom: 12px;
    }

    .img-caption {
      font-size: 10px;
      line-height: 1.5;
      color: rgba(255,255,255,0.7);
      letter-spacing: 0.05em;
    }

    .article-timeline {
      list-style: none;
      padding: 0;
    }

    .article-timeline li {
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
      line-height: 1.6;
    }

    .article-role-section {
      background: white;
      padding: 80px 40px;
    }

    .article-role-section h2 {
      max-width: var(--max-w);
      margin: 0 auto 40px;
      font-size: 32px;
    }

    .role-grid {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
    }

    .role-item h3 {
      font-size: 16px;
      margin-bottom: 12px;
    }

    .role-item p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
    }

    .article-result-grid {
      max-width: var(--max-w);
      margin: 80px auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
    }

    .result-text h2 {
      font-size: 28px;
      margin-bottom: 28px;
      line-height: 1.3;
    }

    .result-text p {
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .result-box-dark {
      background: #3F3F3F;
      padding: 32px;
      border-radius: 4px;
      color: white;
    }

    .result-box-content h3 {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      margin-bottom: 24px;
      color: white;
    }

    .result-box-content p {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 16px;
      opacity: 0.9;
    }

    .article-more {
      background: var(--beige);
      padding: 40px 40px;
      text-align: center;
    }

    .more-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    @media (max-width: 968px) {
      .article-stats-white {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .article-main-grid,
      .article-result-grid {
        grid-template-columns: 1fr;
      }
      
      .role-grid {
        grid-template-columns: 1fr;
      }
    }

/* Logo Ticker */
    .logo-ticker-section {
      background: var(--beige);
      padding: 60px 40px;
      text-align: center;
      overflow: hidden;
    }
    .logo-ticker-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 40px;
    }
    .logo-ticker-wrap {
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }
    .logo-ticker {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      animation: logo-scroll 93s linear infinite;
      width: max-content;
    }
    .logo-ticker-track {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 140px;
      align-items: center;
      padding-right: 140px;
    }
    .logo-item {
      flex-shrink: 0;
      height: 36px;
      display: flex;
      align-items: center;
    }
    .logo-item img, .logo-item svg {
      height: 36px;
      width: auto;
      max-width: 130px;
      min-width: 30px;
      object-fit: contain;
      opacity: 0.45;
      filter: grayscale(1);
      display: block;
    }
    @keyframes logo-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* GTA Section */
    .gta-section {
      background: none;
      padding: 40px;
      border-top: none;
      border-bottom: none;
    }
    .gta-inner {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 40px 0;
    }
    .gta-col-right {
      display: flex;
      justify-content: flex-end;
    }

.gta-label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .1em;
      color: var(--muted);
      margin-bottom: 12px;
    }
    .gta-sub {
      font-size: 19px;
      line-height: 1.7;
      color: var(--dark);
      margin-bottom: 36px;
    }
    .gta-btn {
      display: inline-block;
      padding: 14px 28px;
      border: 1.5px solid var(--dark);
      background: transparent;
      color: var(--dark);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 4px;
      transition: background .2s, color .2s, border-color .2s;
    }
    .gta-btn:hover {
      background: var(--red);
      border-color: var(--red);
      color: var(--white);
    }

    /* ============================================================
       ARTICLE / VERKEFNI DETAIL PAGE
    ============================================================ */
    .art-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: calc(var(--nav-h) + 60px) 40px 60px;
    }
    .art-hero-tag {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .art-hero h1 {
      font-family: Inter, system-ui, sans-serif;
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: var(--charcoal);
    }
    .art-hero-right p {
      font-size: 16px;
      line-height: 1.75;
      color: var(--muted);
    }

    .verk-facts {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 48px 40px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      gap: 40px;
    }
    .fact-item {
      border-right: 1px solid var(--border);
      padding-right: 40px;
      margin-right: 0;
    }
    .fact-item:last-child { border-right: none; }
    .fact-number {
      font-family: Inter, system-ui, sans-serif;
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--charcoal);
      margin-bottom: 6px;
    }
    .fact-label {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .04em;
    }

    .verk-body {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 60px 40px 80px;
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 0 48px;
      align-items: start;
    }
    .verk-body h2 {
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 700;
      letter-spacing: -0.02em;
      margin: 48px 0 16px;
      color: var(--charcoal);
    }
    .verk-body h2:first-child { margin-top: 0; }
    .verk-body p {
      font-size: 15px;
      line-height: 1.8;
      color: var(--charcoal);
      margin-bottom: 20px;
    }
    .verk-pull {
      border-left: 3px solid var(--red);
      padding: 4px 0 4px 24px;
      margin: 40px 0;
    }
    .verk-pull p {
      font-size: 18px;
      font-style: italic;
      color: var(--dark);
      margin: 0;
    }

    .art-cta {
      margin-top: 80px;
      padding-top: 48px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    .art-cta p {
      font-size: 20px;
      font-weight: 600;
      color: var(--dark);
      margin: 0;
      letter-spacing: -0.01em;
    }
    .art-cta-btn {
      flex-shrink: 0;
      padding: 14px 32px;
      border: 1.5px solid var(--dark);
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--dark);
      white-space: nowrap;
      transition: background .2s, color .2s;
    }
    .art-cta-btn:hover { background: var(--dark); color: #fff; }


    .art-img-section {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 40px;
    }
    .art-figure {
      margin: 0;
    }
    .art-hero-img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }
    .art-figure figcaption {
      font-size: 12px;
      color: var(--muted);
      margin-top: 10px;
      letter-spacing: 0.02em;
    }

    .art-float-img {
      position: sticky;
      top: calc(var(--nav-h) + 24px);
    }
    .art-float-img img {
      width: 100%;
      height: auto;
      border-radius: 6px;
      display: block;
    }
    .art-float-img--stack {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .art-float-img figcaption {
      font-size: 11px;
      color: var(--muted);
      margin-top: 8px;
      letter-spacing: 0.02em;
    }
    .verk-text {
      min-width: 0;
    }
    @media (max-width: 900px) {
      .art-hero { grid-template-columns: 1fr; gap: 24px; padding: calc(var(--nav-h) + 32px) 24px 40px; }
      .verk-facts { grid-template-columns: 1fr 1fr; padding: 40px 24px; gap: 32px; }
      .fact-item { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
      .fact-item:last-child { border-bottom: none; padding-bottom: 0; }
      .verk-body { padding: 40px 24px 60px; display: flex; flex-direction: column; gap: 0; }
      .art-float-img { position: static; width: 100%; margin: 0 0 32px 0; display: block; }
      .verk-text { width: 100%; }
    }
    @media (max-width: 600px) {
      .art-cta { flex-direction: column; align-items: flex-start; gap: 24px; }
    }
    @media (max-width: 480px) {
      .verk-facts { grid-template-columns: 1fr 1fr; }
    }