/* ==========================================================
   EIRA SHIPPING - FULL STYLESHEET
   Replace EVERYTHING in the CSS editor with this file.
   (Your old CSS is backed up in the style history dropdown.)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=IBM+Plex+Sans:wght@400;600&display=swap');

:root {
  --brand: #221D71;      /* logo indigo */
  --ink: #17134F;        /* darker indigo for the team block */
  --ink-deep: #0F0C38;
  --lilac: #B7B3E6;
  --gold: #D9A441;
  --mist: #F2F2F8;
  --rule: #DCDBEA;
  --text: #45435E;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- 1. Switch off the old template frame ---------- */

html, body { margin: 0; background: #fff; }

.ksk_main_image_wrapper,
.ksk_menu_wrapper,
.ksk_footer_wrapper,
#left-bar,
#right-bar { display: none !important; }

.ksk_container,
.ksk_container_wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ksk_columns_wrapper {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
}

#columns,
#content,
#columns #content.ksk_middle_area {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- 2. New page design ---------- */

#content .eira { font-family: var(--sans); color: var(--ink); background: #fff; line-height: 1.6; width: 100%; font-size: 16px; }
#content .eira * { box-sizing: border-box; }
#content .eira h1, #content .eira h2, #content .eira h3, #content .eira p, #content .eira blockquote { margin: 0; padding: 0; border: 0; background: none; font-weight: 400; }
#content .eira h1, #content .eira h2, #content .eira h3 { font-family: var(--serif); color: inherit; letter-spacing: 0; }
#content .eira a { text-decoration: none; color: inherit; }
#content .eira a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#content .eira-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
#content .eira-label { font-size: 14px; font-weight: 600; color: var(--brand); margin-bottom: 16px; }
#content .eira-bar { background: #fff; border-bottom: 1px solid var(--rule); }
#content .eira-bar .eira-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
#content .eira-logo { display: block; height: 64px; width: auto; }
#content .eira-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
#content .eira-nav a { color: var(--ink); }
#content .eira-nav a:hover { color: var(--brand); }
#content .eira-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 4px; font-weight: 600; font-size: 16px; }
#content .eira-btn-main { background: var(--gold); color: var(--ink-deep); }
#content .eira-btn-main:hover { background: #E8BA5E; color: var(--ink-deep); }
#content .eira-btn-brand { background: var(--brand); color: #fff; }
#content .eira-btn-brand:hover { background: var(--ink); color: #fff; }
#content .eira-btn-ghost { border: 1px solid #5A55A0; color: #fff; }
#content .eira-btn-ghost:hover { border-color: #fff; color: #fff; }
#content .eira-hero { background: var(--brand); color: #fff; padding: 96px 0 0; overflow: hidden; }
#content .eira-hero .eira-label { color: var(--lilac); }
#content .eira-hero h1 { font-size: 84px; line-height: 1.03; margin: 0 0 28px; max-width: 960px; }
#content .eira-hero p { font-size: 20px; color: #D6D4F3; max-width: 680px; }
#content .eira-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
#content .eira-horizon { display: block; width: 100%; height: auto; margin-top: 64px; }
#content .eira-areas { background: var(--mist); border-bottom: 1px solid var(--rule); padding: 22px 0; }
#content .eira-areas .eira-wrap { display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
#content .eira-areas .eira-label { margin: 0; }
#content .eira-section { padding: 96px 0; }
#content .eira-tint { background: var(--mist); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
#content .eira-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 52px; flex-wrap: wrap; }
#content .eira-head h2 { font-size: 58px; line-height: 1.06; max-width: 620px; }
#content .eira-head p { font-size: 18px; color: var(--text); max-width: 520px; }
#content .eira-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#content .eira-card { background: #fff; border: 1px solid var(--rule); border-top: 4px solid var(--brand); border-radius: 4px; padding: 34px; }
#content .eira-card h3 { font-size: 32px; margin-bottom: 12px; }
#content .eira-card p { color: var(--text); }
#content .eira-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
#content .eira-grid2 h2 { font-size: 46px; line-height: 1.08; margin-bottom: 20px; }
#content .eira-grid2 p { color: var(--text); font-size: 17px; }
#content .eira-ops { display: flex; gap: 80px; }
#content .eira-ops .eira-label { flex: 0 0 260px; }
#content .eira-ops blockquote { font-family: var(--serif); font-size: 40px; line-height: 1.2; color: var(--ink); }
#content .eira-ops p { color: var(--text); font-size: 17px; margin-top: 20px; max-width: 700px; }
#content .eira-team { background: var(--ink); color: #fff; padding: 96px 0; }
#content .eira-team .eira-label { color: var(--lilac); }
#content .eira-team h2 { color: #fff; }
#content .eira-mail { font-size: 20px; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 4px; }
#content .eira-mail:hover { color: #fff; border-color: #fff; }
#content .eira-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #34307A; border: 1px solid #34307A; }
#content .eira-person { background: var(--ink); padding: 30px; }
#content .eira-person h3 { font-size: 28px; }
#content .eira-person .eira-role { color: var(--lilac); font-size: 14px; margin: 4px 0 14px; }
#content .eira-person a, #content .eira-person span { display: block; font-size: 15px; }
#content .eira-person a { color: #fff; }
#content .eira-person a:hover { color: var(--gold); }
#content .eira-person span { color: var(--lilac); }
#content .eira-foot { background: var(--ink-deep); color: var(--lilac); padding: 28px 0; font-size: 14px; }
#content .eira-foot .eira-wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 900px) {
  #content .eira-wrap { padding: 0 20px; }
  #content .eira-bar .eira-wrap { min-height: 72px; }
  #content .eira-logo { height: 44px; }
  #content .eira-nav a:not(.eira-btn) { display: none; }
  #content .eira-nav .eira-btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
  #content .eira-hero { padding-top: 56px; }
  #content .eira-hero h1 { font-size: 46px; }
  #content .eira-hero p { font-size: 17px; }
  #content .eira-actions .eira-btn { width: 100%; }
  #content .eira-section, #content .eira-team { padding: 60px 0; }
  #content .eira-head { gap: 20px; margin-bottom: 32px; }
  #content .eira-head h2 { font-size: 38px; }
  #content .eira-grid3, #content .eira-people { grid-template-columns: minmax(0, 1fr); }
  #content .eira-grid2 { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  #content .eira-grid2 h2 { font-size: 34px; }
  #content .eira-ops { flex-direction: column; gap: 0; }
  #content .eira-ops .eira-label { flex: none; }
  #content .eira-ops blockquote { font-size: 28px; }
  #content .eira-card, #content .eira-person { padding: 24px; }
}

/* ---------- 3. Fixes after first test (17.9.) ---------- */

/* Let every wrapper around the design go full width */
:where(body *):has(.eira) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

/* Logo keeps its real proportions */
#content .eira img.eira-logo { height: 64px !important; width: auto !important; max-width: none !important; }

/* Button text colours (were overridden by the link rule) */
#content .eira a.eira-btn-brand, #content .eira a.eira-btn-brand:hover { color: #fff; }
#content .eira a.eira-btn-main, #content .eira a.eira-btn-main:hover { color: #0F0C38; }
#content .eira a.eira-btn-ghost, #content .eira a.eira-btn-ghost:hover { color: #fff; }
#content .eira a.eira-mail { color: #D9A441; }
#content .eira .eira-nav a { white-space: nowrap; }

/* ---------- 4. Heading and text side by side ---------- */
#content .eira .eira-head { flex-wrap: nowrap; }
#content .eira .eira-head h2 { flex: 1 1 auto; }
#content .eira .eira-head p { flex: 0 1 460px; }

/* ---------- 5. Photo hero ---------- */
#content .eira .eira-hero {
  padding: 140px 0 160px;
  background-color: #221D71;
  background-image:
    linear-gradient(90deg, rgba(23,19,79,0.95) 0%, rgba(34,29,113,0.85) 40%, rgba(34,29,113,0.35) 75%, rgba(34,29,113,0.1) 100%),
    url('/files/eirashipping.ehdolla.fi/kuvat/Photo_gallery/eira-hero.jpg');
  background-size: cover;
  background-position: center 40%;
}
#content .eira .eira-hero p { color: #E4E2F7; }
#content .eira .eira-horizon { display: none; }

@media (max-width: 900px) {
  #content .eira .eira-head { flex-wrap: wrap; }
  #content .eira .eira-head p { flex: 1 1 100%; }
  #content .eira .eira-hero {
    padding: 64px 0 72px;
    background-image:
      linear-gradient(180deg, rgba(23,19,79,0.92) 0%, rgba(34,29,113,0.8) 100%),
      url('/files/eirashipping.ehdolla.fi/kuvat/Photo_gallery/eira-hero.jpg');
    background-position: 70% center;
  }
}

/* ---------- 6. Ice band ---------- */
#content .eira .eira-ice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #17134F; color: #fff; }
#content .eira img.eira-ice-img { width: 100% !important; height: 100% !important; min-height: 480px; object-fit: cover; display: block; max-width: none !important; }
#content .eira .eira-ice-text { padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; max-width: 640px; }
#content .eira .eira-ice .eira-label { color: #B7B3E6; }
#content .eira .eira-ice h2 { font-size: 52px; line-height: 1.06; margin-bottom: 20px; color: #fff; }
#content .eira .eira-ice p { font-size: 18px; color: #E4E2F7; }
@media (max-width: 900px) {
  #content .eira .eira-ice { grid-template-columns: minmax(0, 1fr); }
  #content .eira img.eira-ice-img { min-height: 0; height: 240px !important; }
  #content .eira .eira-ice-text { padding: 48px 20px; }
  #content .eira .eira-ice h2 { font-size: 36px; }
}

/* ---------- 7. Lighthouse photo behind Operations ---------- */
#content .eira .eira-ops-photo {
  padding: 150px 0;
  color: #fff;
  background-color: #221D71;
  background-image:
    linear-gradient(90deg, rgba(23,19,79,0.95) 0%, rgba(34,29,113,0.85) 40%, rgba(34,29,113,0.25) 70%, rgba(34,29,113,0.05) 100%),
    url('/files/eirashipping.ehdolla.fi/kuvat/Photo_gallery/eira-lighthouse.jpg');
  background-size: cover;
  background-position: 30% center;
}
#content .eira .eira-ops-photo .eira-ops { flex-direction: column; gap: 0; }
#content .eira .eira-ops-photo .eira-ops .eira-label { flex: none; color: #B7B3E6; }
#content .eira .eira-ops-photo blockquote { color: #fff; font-size: 46px; max-width: 640px; }
#content .eira .eira-ops-photo p { color: #E4E2F7; max-width: 560px; }
@media (max-width: 900px) {
  #content .eira .eira-ops-photo {
    padding: 72px 0;
    background-image:
      linear-gradient(180deg, rgba(23,19,79,0.9) 0%, rgba(34,29,113,0.85) 100%),
      url('/files/eirashipping.ehdolla.fi/kuvat/Photo_gallery/eira-lighthouse.jpg');
    background-position: 60% center;
  }
  #content .eira .eira-ops-photo blockquote { font-size: 28px; }
}
#columns #content.ksk_middle_area {
  width: 1904px;
}
.ksk_container {
  width: 1905px;
  max-width: 1905px;
}