/* Húsó website. Colours follow the Húsó brand guide: Fjord Navy, Kvöldroði
   (coral) and Morning Mist. Text on coral is always navy, never white.
   Fonts are served from this site (not Google Fonts), so visitors' details
   are not sent to anyone else. */

@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("fonts/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url("fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }

:root {
  --navy: #102A43;
  --navy-light: #1D4E7A;
  --coral: #FF7A5C;
  --coral-text: #B5432C;
  --mist: #DCE8F0;
  --background: #F5F8FA;
  --surface: #FFFFFF;
  --text: #102A43;
  --muted: #4A5E73;
  --border: #DCE3EA;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--coral-text); }
a:hover { color: var(--navy); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 12px; z-index: 1; }

header.site { background: var(--navy); }
header.site .bar {
  max-width: 760px; margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.brand {
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 26px;
  color: #fff; text-decoration: none; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 10px;
}
.brand img { display: block; }
.brand::after { margin-left: -10px; }
.brand::after { content: "."; color: var(--coral); }
header.site nav { display: flex; gap: 18px; flex-wrap: wrap; }
header.site nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
header.site nav a:hover, header.site nav a[aria-current="page"] { color: var(--coral); }
.header-end { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Language switch, top right on every page */
.langswitch {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: rgba(220, 232, 240, 0.12); border: 1px solid rgba(220, 232, 240, 0.28);
}
.langswitch a {
  min-width: 44px; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mist); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
}
.langswitch a:hover { color: #fff; background: rgba(220, 232, 240, 0.12); }
.langswitch a[aria-current="true"], .langswitch a[aria-current="true"]:hover { background: var(--coral); color: var(--navy); }
a:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

main { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; }

h1, h2 { font-family: "Bricolage Grotesque", system-ui, sans-serif; line-height: 1.2; color: var(--navy); }
h1 { font-size: 36px; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 22px; font-weight: 600; margin: 36px 0 8px; }

.updated { color: var(--muted); margin-top: 0; }

ul { padding-left: 22px; }
li { margin: 6px 0; }

.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--border); }
th { background: #EAF0F5; font-weight: 700; }
tr:last-child td { border-bottom: 0; }

.hero .tagline { font-size: 20px; color: var(--coral-text); font-weight: 600; margin-top: 0; }
.links { list-style: none; padding: 0; }
.links li { margin: 10px 0; }
.links a {
  display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; text-decoration: none; color: var(--navy); font-weight: 600;
}
.links a:hover { border-color: var(--coral); }

footer.site { border-top: 1px solid var(--border); }
footer.site p { max-width: 760px; margin: 0 auto; padding: 20px 16px 32px; color: var(--muted); font-size: 14px; }

@media (max-width: 480px) {
  h1 { font-size: 30px; }
  body { font-size: 16px; }
}

/* ---------- Home page ---------- */

body.home { background: var(--background); }
body.home main { max-width: none; padding: 0; }
body.home header.site { position: relative; z-index: 1; }
body.home header.site .bar, .home-wrap { max-width: 1040px; }

.hero-home {
  position: relative; overflow: hidden; background: var(--navy); color: #fff;
  /* Faint window grid, like the face of an apartment block */
  background-image:
    repeating-linear-gradient(90deg, rgba(220, 232, 240, 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(220, 232, 240, 0.05) 0 1px, transparent 1px 28px);
}
.home-wrap { margin: 0 auto; padding: 0 16px; }
.hero-home .home-wrap {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 48px;
  padding-top: 56px; padding-bottom: 88px;
}
.hero-logo { display: block; width: 112px; height: 112px; border-radius: 30px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
.hero-home h1 {
  color: #fff; font-size: clamp(72px, 14vw, 136px); font-weight: 700; line-height: 0.95;
  letter-spacing: -0.03em; margin: 28px 0 0;
}
.hero-home h1 .dot { color: var(--coral); }
.slogan {
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(26px, 4.2vw, 40px); line-height: 1.15; margin: 14px 0 0; color: var(--mist);
}
.status {
  display: inline-flex; align-items: center; gap: 10px; margin: 32px 0 0; padding: 8px 16px 8px 14px;
  border-radius: 999px; background: var(--coral); color: var(--navy); font-weight: 700; font-size: 16px;
}
.status .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--navy); animation: pulse 1.8s ease-in-out infinite; }
.hero-home .lead { color: var(--mist); font-size: 19px; max-width: 34em; margin: 20px 0 0; }
.hero-home .lead strong { color: #fff; font-weight: 600; }

/* Decorative building: windows light up coral, like an evening glow */
.building {
  justify-self: center; width: min(100%, 340px); padding: 26px 24px 0; border-radius: 22px 22px 0 0;
  background: #1B3A57; border: 1px solid rgba(220, 232, 240, 0.14); border-bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-self: end; margin-bottom: -88px;
}
.building span { aspect-ratio: 3 / 4; border-radius: 6px; background: rgba(220, 232, 240, 0.12); }
.building span.lit { background: var(--coral); box-shadow: 0 0 22px rgba(255, 122, 92, 0.55); animation: glow 5s ease-in-out infinite; }
.building span.lit:nth-child(3n) { animation-delay: 1.3s; }
.building span.lit:nth-child(4n) { animation-delay: 2.6s; }
.building .door { grid-column: 2 / span 2; aspect-ratio: auto; height: 64px; margin-top: 4px; border-radius: 10px 10px 0 0; background: var(--mist); opacity: 0.9; }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .status .pulse, .building span.lit { animation: none; } }

.features { padding-top: 64px; padding-bottom: 24px; }
.features h2 { font-size: 30px; margin: 0 0 24px; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 14px; }
.feature-list li {
  margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.feature-list svg { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--mist); color: var(--navy); }
.feature-list b { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 19px; line-height: 1.2; }
.feature-list span { color: var(--muted); font-size: 15px; line-height: 1.45; }

.promise { padding-top: 40px; padding-bottom: 64px; }
.promise p.big {
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1; margin: 0 0 12px; color: var(--navy);
}
.promise p.big .dot { color: var(--coral); }
.promise p { margin: 8px 0; max-width: 40em; }

body.home footer.site p { max-width: 1040px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }

@media (max-width: 760px) {
  .hero-home .home-wrap { grid-template-columns: 1fr; gap: 0; padding-top: 32px; padding-bottom: 0; }
  .hero-logo { width: 84px; height: 84px; border-radius: 22px; }
  .building { width: min(100%, 280px); margin-bottom: 0; margin-top: 48px; gap: 12px; padding: 20px 18px 0; }
  .building .door { height: 48px; }
}