/* =========================================================
   SEA LICENSING
   GLOBAL MARITIME NEWS / INSIGHTS V1
   ========================================================= */

.mi1-main{
  --navy:#002B49;
  --deep:#042B42;
  --deep2:#073A56;
  --blue:#0089D1;
  --cyan:#62CEF5;
  --ink:#0C344B;
  --muted:#607A89;
  --line:#D9E6EC;
  --soft:#F3F8FA;

  overflow:hidden;

  color:var(--ink);
  background:#fff;
}

.mi1-main *,
.mi1-main *::before,
.mi1-main *::after{
  box-sizing:border-box;
}

.mi1-shell{
  width:min(
    calc(100% - 96px),
    var(--shell,1440px)
  );

  margin-inline:auto;
}


/* =========================================================
   HERO
   ========================================================= */

.mi1-hero{
  position:relative;

  min-height:470px;

  display:flex;
  align-items:center;

  overflow:hidden;
  isolation:isolate;

  background:#032B43;
}

.mi1-hero::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:-3;

  background:
    radial-gradient(
      circle at 79% 35%,
      rgba(44,174,225,.25),
      transparent 25%
    ),
    linear-gradient(
      112deg,
      #032B43 0%,
      #073D5B 53%,
      #005D83 100%
    );
}

.mi1-hero::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:-2;

  opacity:.22;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='520' viewBox='0 0 1500 520' fill='none'%3E%3Cg stroke='%2378D7F7'%3E%3Cpath opacity='.35' d='M0 105c150-63 271 64 423 0s281-63 435 0 284 61 642-6'/%3E%3Cpath opacity='.23' d='M0 190c145-52 268 53 415 0s279-52 430 0 286 51 655 0'/%3E%3Cpath opacity='.14' d='M0 281c139-44 262 45 405 0s274-44 420 0 288 43 675 0'/%3E%3Ccircle cx='1230' cy='205' r='138' opacity='.28'/%3E%3Ccircle cx='1230' cy='205' r='92' opacity='.18'/%3E%3Ccircle cx='1230' cy='205' r='48' opacity='.13'/%3E%3Cpath d='M1230 48v314M1073 205h314M1119 94l222 222M1341 94l-222 222' opacity='.22'/%3E%3Cpath d='M890 395c89-64 176-86 272-63 55 13 102 6 166-25' stroke-dasharray='7 10' opacity='.30'/%3E%3Ccircle cx='890' cy='395' r='6' fill='%2378D7F7' stroke='none'/%3E%3Ccircle cx='1328' cy='307' r='6' fill='%2378D7F7' stroke='none'/%3E%3C/g%3E%3C/svg%3E");

  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

.mi1-hero-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.12fr)
    minmax(390px,.88fr);

  gap:90px;
  align-items:center;

  padding:66px 0;
}

.mi1-eyebrow{
  display:block;

  margin-bottom:16px;

  color:#68D4FA;

  font-size:10px;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.mi1-hero h1{
  max-width:820px;

  margin:0;

  color:#fff;

  font-size:60px;
  line-height:.99;
  font-weight:800;
  letter-spacing:-.055em;
}

.mi1-hero-copy > p{
  max-width:690px;

  margin:22px 0 0;

  color:rgba(255,255,255,.72);

  font-size:13px;
  line-height:1.72;
}

.mi1-live-row{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-top:28px;
}

.mi1-live-pill{
  display:inline-flex;
  align-items:center;

  min-height:32px;

  padding:0 13px;

  border:1px solid rgba(255,255,255,.15);
  border-radius:30px;

  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.045);

  font-size:8px;
  font-weight:750;
}

.mi1-live-dot{
  width:6px;
  height:6px;

  margin-right:8px;

  border-radius:50%;

  background:#66D4F9;

  box-shadow:
    0 0 0 4px rgba(102,212,249,.10);
}


/* HERO STATS */

.mi1-status{
  padding:27px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      rgba(7,58,85,.74),
      rgba(2,39,59,.66)
    );

  box-shadow:
    0 22px 52px rgba(0,0,0,.15);

  backdrop-filter:blur(10px);
}

.mi1-status-label{
  display:block;

  color:#68D3F8;

  font-size:8px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.mi1-status h2{
  margin:11px 0 0;

  color:#fff;

  font-size:21px;
  line-height:1.18;
}

.mi1-status > p{
  margin:9px 0 0;

  color:rgba(255,255,255,.61);

  font-size:9.5px;
  line-height:1.58;
}

.mi1-status-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:10px;

  margin-top:21px;
  padding-top:19px;

  border-top:1px solid rgba(255,255,255,.11);
}

.mi1-stat span{
  display:block;

  color:rgba(255,255,255,.38);

  font-size:7px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.mi1-stat b{
  display:block;

  margin-top:6px;

  color:#fff;

  font-size:12px;
}

.mi1-stat:first-child{
  grid-column:span 1;
}


/* =========================================================
   LEAD STORIES
   ========================================================= */

.mi1-lead{
  position:relative;

  padding:72px 0 75px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #F7FBFD,
      #EEF6F9
    );
}

.mi1-lead::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.075;

  background-image:
    linear-gradient(
      rgba(0,78,124,.5) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,78,124,.5) 1px,
      transparent 1px
    );

  background-size:44px 44px;
}

.mi1-lead > .mi1-shell{
  position:relative;
  z-index:2;
}

.mi1-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:40px;

  margin-bottom:28px;
}

.mi1-kicker{
  display:block;

  margin-bottom:9px;

  color:#0089D1;

  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.mi1-section-head h2{
  margin:0;

  color:#092F46;

  font-size:34px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.mi1-section-head p{
  max-width:490px;

  margin:0;

  color:#607A89;

  font-size:10px;
  line-height:1.6;
}

.mi1-lead-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.34fr)
    minmax(380px,.66fr);

  gap:18px;
}


/* FEATURE */

.mi1-feature-card{
  display:block;

  min-height:410px;

  overflow:hidden;

  border-radius:8px;

  text-decoration:none;

  box-shadow:
    0 16px 40px rgba(0,43,73,.10);
}

.mi1-feature-media{
  position:relative;

  min-height:410px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(66,194,239,.30),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #063652,
      #005D82
    );
}

.mi1-feature-media > img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .55s ease;
}

.mi1-feature-card:hover img{
  transform:scale(1.035);
}

.mi1-feature-shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,22,36,.08) 15%,
      rgba(0,28,44,.38) 49%,
      rgba(0,24,39,.94) 100%
    );
}

.mi1-feature-content{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:30px;
}

.mi1-story-meta{
  display:flex;
  flex-wrap:wrap;

  gap:7px;
}

.mi1-story-meta span{
  display:inline-flex;
  align-items:center;

  min-height:22px;

  padding:0 8px;

  border-radius:3px;

  color:#DDF7FF;
  background:rgba(0,139,209,.30);

  font-size:7px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.mi1-feature-content h2{
  max-width:800px;

  margin:15px 0 0;

  color:#fff;

  font-size:30px;
  line-height:1.08;
  letter-spacing:-.035em;
}

.mi1-feature-content p{
  max-width:760px;

  margin:11px 0 0;

  color:rgba(255,255,255,.74);

  font-size:10px;
  line-height:1.6;
}

.mi1-story-foot{
  display:flex;
  justify-content:space-between;

  gap:20px;

  margin-top:18px;

  color:rgba(255,255,255,.52);

  font-size:8px;
}

.mi1-story-foot strong{
  color:#7BD9FA;
}


/* COMPACT STORIES */

.mi1-lead-stack{
  display:grid;

  grid-template-rows:repeat(3,1fr);

  gap:12px;
}

.mi1-compact-card{
  display:grid;

  grid-template-columns:122px 1fr;

  min-height:120px;

  overflow:hidden;

  border:1px solid #D9E6EC;
  border-radius:7px;

  color:inherit;
  background:#fff;

  text-decoration:none;

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.mi1-compact-card:hover{
  transform:translateY(-2px);

  border-color:#72BEDF;

  box-shadow:
    0 12px 25px rgba(0,43,73,.08);
}

.mi1-compact-thumb{
  position:relative;

  min-height:100%;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #073B59,
      #0080AB
    );
}

.mi1-compact-thumb img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}

.mi1-thumb-fallback{
  position:absolute;
  inset:0;

  opacity:.17;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFFFFF'%3E%3Cpath d='M7 64c18-16 30 13 48-3s28 6 38-3M7 76c18-16 30 13 48-3s28 6 38-3' opacity='.6'/%3E%3Ccircle cx='72' cy='27' r='18' opacity='.35'/%3E%3Cpath d='M72 5v44M50 27h44' opacity='.35'/%3E%3C/svg%3E")
    center/cover no-repeat;
}

.mi1-compact-body{
  padding:14px;
}

.mi1-compact-body h3{
  margin:10px 0 0;

  color:#11384F;

  font-size:11px;
  line-height:1.36;
}

.mi1-compact-body time{
  display:block;

  margin-top:9px;

  color:#8195A0;

  font-size:7.5px;
}


/* =========================================================
   NEWS HUB
   ========================================================= */

.mi1-hub{
  position:relative;

  padding:78px 0 90px;

  overflow:hidden;

  background:#fff;
}

.mi1-hub::after{
  content:"";

  position:absolute;

  width:550px;
  height:550px;

  right:-220px;
  top:-180px;

  opacity:.045;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill='none' stroke='%23004E7C'%3E%3Ccircle cx='250' cy='250' r='190'/%3E%3Ccircle cx='250' cy='250' r='125'/%3E%3Ccircle cx='250' cy='250' r='60'/%3E%3Cpath d='M250 30v440M30 250h440M95 95l310 310M405 95L95 405'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

.mi1-hub > .mi1-shell{
  position:relative;
  z-index:2;
}

.mi1-tools{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    270px;

  gap:25px;

  align-items:center;

  margin:29px 0 34px;
}

.mi1-filters{
  display:flex;
  flex-wrap:wrap;

  gap:7px;
}

.mi1-filter{
  min-height:32px;

  padding:0 13px;

  border:1px solid #D3E4EB;
  border-radius:30px;

  cursor:pointer;

  color:#527182;
  background:#fff;

  font:inherit;
  font-size:8px;
  font-weight:800;

  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.mi1-filter:hover,
.mi1-filter.is-active{
  color:#fff;
  border-color:#0089D1;
  background:#0089D1;
}

.mi1-search-wrap{
  position:relative;
}

.mi1-search-wrap::before{
  content:"";

  position:absolute;

  left:13px;
  top:50%;

  width:15px;
  height:15px;

  transform:translateY(-50%);

  opacity:.45;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004E7C' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

.mi1-search{
  width:100%;
  height:39px;

  padding:0 13px 0 38px;

  border:1px solid #D3E4EB;
  border-radius:5px;

  outline:none;

  color:#123A50;
  background:#F9FCFD;

  font:inherit;
  font-size:9px;
}

.mi1-search:focus{
  border-color:#65BFE4;

  box-shadow:
    0 0 0 3px rgba(0,137,209,.08);
}


/* GRID */

.mi1-news-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;
}

.mi1-news-card{
  position:relative;

  min-width:0;

  overflow:hidden;

  border:1px solid #D9E6EC;
  border-radius:7px;

  background:#fff;

  transition:
    transform .30s ease,
    border-color .30s ease,
    box-shadow .30s ease;
}

.mi1-news-card:hover{
  transform:translateY(-4px);

  border-color:#74BEDD;

  box-shadow:
    0 17px 36px rgba(0,43,73,.10);
}

.mi1-news-media{
  position:relative;

  min-height:190px;

  display:block;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #073B59,
      #007BA7
    );
}

.mi1-news-media img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .45s ease;
}

.mi1-news-card:hover
.mi1-news-media img{
  transform:scale(1.035);
}

.mi1-card-fallback{
  position:absolute;
  inset:0;

  opacity:.16;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 180' fill='none' stroke='%23FFFFFF'%3E%3Cpath d='M0 115c55-38 91 31 145-7s91 24 155-13M0 137c55-38 91 31 145-7s91 24 155-13'/%3E%3Ccircle cx='230' cy='55' r='39' opacity='.6'/%3E%3Cpath d='M230 10v90M185 55h90M198 23l64 64M262 23l-64 64' opacity='.5'/%3E%3C/svg%3E")
    center/cover no-repeat;
}

.mi1-category{
  position:absolute;

  left:15px;
  bottom:14px;

  z-index:3;

  padding:6px 8px;

  border-radius:3px;

  color:#fff;
  background:rgba(0,43,73,.78);

  backdrop-filter:blur(5px);

  font-size:7px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.mi1-news-body{
  padding:20px;
}

.mi1-news-source{
  display:flex;
  justify-content:space-between;

  gap:12px;

  color:#8296A1;

  font-size:7.5px;
}

.mi1-news-source span{
  color:#0089D1;

  font-weight:850;
  text-transform:uppercase;
}

.mi1-news-body h3{
  margin:13px 0 0;
}

.mi1-news-body h3 a{
  color:#10374D;

  text-decoration:none;

  font-size:15px;
  line-height:1.28;

  transition:color .22s ease;
}

.mi1-news-body h3 a:hover{
  color:#0089D1;
}

.mi1-news-body p{
  margin:11px 0 0;

  color:#617B8A;

  font-size:9.5px;
  line-height:1.64;
}

.mi1-read{
  display:inline-block;

  margin-top:17px;

  color:#007EBB;

  text-decoration:none;

  font-size:8px;
  font-weight:850;
}


/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.mi1-loading,
.mi1-empty{
  padding:45px;

  border:1px dashed #CADDE5;
  border-radius:7px;

  color:#668290;
  background:#F7FBFC;

  text-align:center;

  font-size:10px;
}

.mi1-loading strong{
  display:block;

  color:#123A50;

  font-size:12px;
}

.mi1-loading span{
  display:block;

  margin-top:6px;
}


/* =========================================================
   SOURCE NOTE
   ========================================================= */

.mi1-source-note{
  position:relative;

  padding:55px 0;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #F2F7FA,
      #EAF3F7
    );
}

.mi1-source-note::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.10;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='180' viewBox='0 0 900 180'%3E%3Cg fill='none' stroke='%23004E7C'%3E%3Cpath opacity='.2' d='M0 44c100-35 170 35 270 0s175-35 275 0 170 34 355 0'/%3E%3Cpath opacity='.12' d='M0 95c95-31 170 31 266 0s174-31 271 0 170 30 363 0'/%3E%3C/g%3E%3C/svg%3E")
    repeat;
}

.mi1-source-note-inner{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    minmax(0,.78fr)
    minmax(0,1.22fr);

  gap:70px;
  align-items:center;
}

.mi1-source-note h2{
  margin:0;

  color:#10384F;

  font-size:26px;
  letter-spacing:-.03em;
}

.mi1-source-note p{
  margin:0;

  color:#607A89;

  font-size:10px;
  line-height:1.7;
}


/* =========================================================
   RESPONSIVE FALLBACK
   ========================================================= */

@media(max-width:1100px){

  .mi1-shell{
    width:min(
      calc(100% - 44px),
      var(--shell,1440px)
    );
  }

  .mi1-hero-grid,
  .mi1-lead-grid,
  .mi1-source-note-inner{
    grid-template-columns:1fr;
    gap:35px;
  }

  .mi1-news-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .mi1-tools{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){

  .mi1-shell{
    width:min(
      calc(100% - 28px),
      var(--shell,1440px)
    );
  }

  .mi1-hero h1{
    font-size:44px;
  }

  .mi1-news-grid{
    grid-template-columns:1fr;
  }

  .mi1-compact-card{
    grid-template-columns:100px 1fr;
  }
}

/* ==========================================================
   INSIGHTS — PREMIUM LIVE STATUS PILLS
   Glass / cyan hover / green live indicator
   ========================================================== */

.mi1-main .mi1-live-row{
  gap:12px !important;
  margin-top:30px !important;
}


.mi1-main .mi1-live-pill{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;

  min-height:43px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 18px !important;

  border:
    1px solid rgba(181,226,244,.25) !important;

  border-radius:999px !important;

  color:
    rgba(245,252,255,.94) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.085) 0%,
      rgba(255,255,255,.037) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 5px 16px rgba(0,18,31,.08) !important;

  backdrop-filter:
    blur(13px)
    saturate(135%) !important;

  -webkit-backdrop-filter:
    blur(13px)
    saturate(135%) !important;

  font-size:9px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.025em !important;

  cursor:default !important;

  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}


/* soft internal glass highlight */

.mi1-main .mi1-live-pill::before{
  content:"" !important;

  position:absolute !important;

  left:12px !important;
  right:12px !important;
  top:0 !important;

  height:1px !important;

  z-index:-1 !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.40),
      transparent
    ) !important;

  opacity:.55 !important;
}


/* premium hover */

.mi1-main .mi1-live-pill:hover{
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(101,211,249,.48) !important;

  background:
    linear-gradient(
      180deg,
      rgba(64,179,222,.16) 0%,
      rgba(255,255,255,.055) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 11px 27px rgba(0,20,34,.16),
    0 0 22px rgba(63,191,238,.07) !important;
}


/* ==========================================================
   LIVE GREEN INDICATOR
   ========================================================== */

.mi1-main .mi1-live-dot{
  position:relative !important;

  width:8px !important;
  height:8px !important;

  flex:0 0 8px !important;

  margin-right:9px !important;

  border-radius:50% !important;

  background:#38E681 !important;

  box-shadow:
    0 0 0 3px rgba(56,230,129,.10),
    0 0 9px rgba(56,230,129,.62) !important;

  animation:
    mi1LiveGreenPulse 1.35s
    ease-in-out infinite !important;
}


.mi1-main .mi1-live-dot::after{
  content:"" !important;

  position:absolute !important;
  inset:-4px !important;

  border:
    1px solid rgba(56,230,129,.42) !important;

  border-radius:50% !important;

  animation:
    mi1LiveGreenRing 1.35s
    ease-out infinite !important;
}


@keyframes mi1LiveGreenPulse{

  0%,
  100%{
    opacity:1;
    transform:scale(1);
  }

  50%{
    opacity:.48;
    transform:scale(.82);
  }

}


@keyframes mi1LiveGreenRing{

  0%{
    opacity:.70;
    transform:scale(.65);
  }

  65%{
    opacity:.12;
  }

  100%{
    opacity:0;
    transform:scale(1.55);
  }

}


/* slightly brighter dot when pill is hovered */

.mi1-main .mi1-live-pill:hover
.mi1-live-dot{
  background:#52F39A !important;

  box-shadow:
    0 0 0 3px rgba(82,243,154,.12),
    0 0 13px rgba(82,243,154,.75) !important;
}


/* desktop optical balance */

@media (min-width:1101px){

  .mi1-main .mi1-live-pill{
    min-height:44px !important;
    padding-inline:19px !important;
  }

}


/* smaller screens */

@media (max-width:700px){

  .mi1-main .mi1-live-row{
    gap:8px !important;
  }

  .mi1-main .mi1-live-pill{
    min-height:39px !important;
    padding:0 14px !important;
    font-size:8px !important;
  }

}