.sg {
	--sg-deep: #082f35;
	--sg-channel: #0d4d51;
	--sg-lagoon: #0f7775;
	--sg-seafoam: #d8f0e9;
	--sg-shell: #f5f0e5;
	--sg-paper: #fffdf7;
	--sg-granite: #253337;
	--sg-coral: #dc6249;
	--sg-sun: #f1c96a;
	--sg-line: rgba(8, 47, 53, .18);
	background: var(--sg-paper);
	color: var(--sg-granite);
	font-family: "Tajawal", "Noto Sans Arabic", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.85;
	overflow: clip;
}
.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
.sg__wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sg__narrow { width: min(840px, calc(100% - 40px)); }
.sg h1, .sg h2, .sg h3, .sg p, .sg li, .sg th, .sg td { color: inherit; }
.sg h1, .sg h2, .sg h3 { margin-block: 0 .6em; font-weight: 800; line-height: 1.3; letter-spacing: -.025em; }
.sg h1 { color: #fff !important; font-size: clamp(2.65rem, 6vw, 5.6rem); max-width: 850px; }
.sg h2 { color: var(--sg-deep) !important; font-size: clamp(2rem, 4vw, 3.45rem); }
.sg h3 { color: var(--sg-deep) !important; font-size: 1.35rem; }
.sg p { margin-block: 0 1.1rem; }
.sg a { color: var(--sg-lagoon); text-underline-offset: .22em; }
.sg a:hover { color: var(--sg-coral); }
.sg a:focus-visible, .sg button:focus-visible, .sg [tabindex="0"]:focus-visible { outline: 3px solid var(--sg-sun); outline-offset: 4px; }
.sg__hero { position: relative; padding: clamp(72px, 9vw, 132px) 0 clamp(70px, 8vw, 118px); color: #fff; background: var(--sg-deep); isolation: isolate; }
.sg__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .26; background: repeating-linear-gradient(118deg, transparent 0 46px, rgba(216,240,233,.18) 47px 48px), radial-gradient(circle at 18% 10%, var(--sg-lagoon), transparent 40%); }
.sg__hero::after { content: "03 ISLANDS / 01 ROUTE"; position: absolute; inset-inline-end: 3vw; bottom: 0; color: rgba(255,255,255,.065); font-size: clamp(3rem, 10vw, 9rem); font-weight: 900; line-height: .8; white-space: nowrap; }
.sg__hero-grid { display: grid; grid-template-columns: minmax(310px, .7fr) minmax(0, 1.3fr); gap: clamp(40px, 7vw, 92px); align-items: center; }
.sg__eyebrow, .sg__kicker { color: #96341f !important; font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.sg__hero .sg__eyebrow { color: var(--sg-sun) !important; }
.sg__lead { color: #e8f7f2 !important; max-width: 800px; font-size: clamp(1.08rem, 2vw, 1.35rem); }
.sg__manifest { order: 2; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); box-shadow: 18px 18px 0 rgba(15,119,117,.35); padding: 24px; backdrop-filter: blur(8px); }
.sg__manifest-head { color: var(--sg-sun) !important; font: 800 .7rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.sg__manifest ol { list-style: none; padding: 0; margin: 22px 0; }
.sg__manifest li { display: grid; grid-template-columns: 34px 1fr auto; gap: 13px; align-items: center; padding: 14px 0; border-block-start: 1px dashed rgba(255,255,255,.25); }
.sg__manifest li:last-child { border-block-end: 1px dashed rgba(255,255,255,.25); }
.sg__manifest li > span, .sg__manifest li > b { color: var(--sg-sun); font: 800 .72rem ui-monospace, Consolas, monospace; }
.sg__manifest strong { display: block; color: #fff; }
.sg__manifest small { display: block; color: #cde3df; }
.sg__manifest-note { color: #fff !important; margin: 0; font-size: .86rem; }
.sg__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.sg__button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 12px 24px; border: 2px solid var(--sg-coral); color: #fff !important; background: var(--sg-coral); font-weight: 800; text-decoration: none; box-shadow: 6px 6px 0 var(--sg-sun); transition: transform .18s, box-shadow .18s; }
.sg__button:hover { color: #fff !important; transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--sg-sun); }
.sg__text-link { color: #fff !important; font-weight: 800; }
.sg__toc { position: sticky; top: 0; z-index: 20; border-block-end: 1px solid var(--sg-line); background: rgba(255,253,247,.96); box-shadow: 0 8px 22px rgba(8,47,53,.08); }
.sg__toc .sg__wrap { display: flex; gap: 23px; overflow-x: auto; scrollbar-width: thin; }
.sg__toc a { flex: 0 0 auto; padding: 14px 0 11px; border-block-end: 3px solid transparent; color: var(--sg-deep); font-size: .83rem; font-weight: 800; text-decoration: none; }
.sg__toc a:hover { border-color: var(--sg-coral); }
.sg__section { padding: clamp(68px, 8vw, 112px) 0; scroll-margin-top: 70px; }
.sg__section--shell { background: var(--sg-shell); }
.sg__section--channel { color: #eaf7f3; background: var(--sg-channel); }
.sg__section--channel h2, .sg__section--channel h3 { color: #fff !important; }
.sg__section--channel .sg__kicker { color: var(--sg-sun) !important; }
.sg__heading { max-width: 880px; margin-bottom: 32px; }
.sg__verdict { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 34px; border: 1px solid var(--sg-line); }
.sg__verdict > div { padding: 22px; border-inline-end: 1px solid var(--sg-line); }
.sg__verdict > div:last-child { border: 0; }
.sg__verdict span, .sg__verdict small { display: block; color: #617174; font-size: .82rem; }
.sg__verdict strong { display: block; margin: 6px 0; color: var(--sg-deep); font-size: 1.25rem; }
.sg__notice { margin-top: 30px !important; padding: 20px 24px; border-inline-start: 6px solid var(--sg-coral); background: var(--sg-seafoam); color: var(--sg-deep) !important; }
.sg__facts { display: grid; grid-template-columns: repeat(3, 1fr); border-block-start: 1px solid var(--sg-line); border-inline-start: 1px solid var(--sg-line); }
.sg__facts > div { padding: 26px; border-block-end: 1px solid var(--sg-line); border-inline-end: 1px solid var(--sg-line); }
.sg__facts strong { color: #96341f !important; font-size: .9rem; }
.sg__facts p { margin: 6px 0 0; }
.sg__planner { border: 1px solid var(--sg-line); background: #fff; box-shadow: 14px 14px 0 var(--sg-seafoam); }
.sg__choice { display: grid; grid-template-columns: minmax(200px, .6fr) 1.4fr; gap: 24px; align-items: center; padding: 25px 30px; border-block-end: 1px solid var(--sg-line); }
.sg__choice h3 { margin: 0; }
.sg__choice > div { display: flex; flex-wrap: wrap; gap: 10px; }
.sg__choice button { min-height: 46px; padding: 9px 18px; border: 1px solid var(--sg-lagoon); color: var(--sg-deep); background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.sg__choice button[aria-pressed="true"] { color: #fff; background: var(--sg-lagoon); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.sg__plan-output { padding: 30px; background: var(--sg-deep); color: #fff; }
.sg__plan-route { display: grid; grid-template-columns: 1fr 50px 1fr 50px 1fr; align-items: center; }
.sg__plan-route span { display: block; padding: 20px; border: 1px solid rgba(255,255,255,.26); text-align: center; }
.sg__plan-route b, .sg__plan-route output { display: block; color: #fff; }
.sg__plan-route output { margin-top: 5px; color: var(--sg-sun); font-size: 1.15rem; font-weight: 800; }
.sg__plan-route i { display: block; height: 1px; background: var(--sg-sun); }
.sg__plan-output > p { margin: 24px 0 0; color: #e5f3ef !important; }
.sg__plan-warning { padding-inline-start: 16px; border-inline-start: 4px solid var(--sg-coral); font-size: .9rem; }
.sg__islands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.22); }
.sg__islands section { padding: clamp(25px, 3.5vw, 42px); background: var(--sg-channel); }
.sg__islands section:nth-child(2) { background: #0a4147; transform: translateY(18px); }
.sg__section--channel p, .sg__section--channel li, .sg__section--channel strong { color: #eaf7f3 !important; }
.sg__islands ul { padding-inline-start: 1.2rem; }
.sg__island-code { color: var(--sg-sun) !important; font: 800 .75rem ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.sg__checklist, .sg__expert { margin-block: 32px; padding: 26px 28px; border: 1px solid var(--sg-line); background: var(--sg-shell); }
.sg__checklist ul { columns: 2; column-gap: 36px; padding-inline-start: 1.2rem; }
.sg__table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--sg-line); background: #fff; }
.sg table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .92rem; }
.sg caption { padding: 18px; color: var(--sg-deep); font-weight: 800; text-align: start; }
.sg th, .sg td { padding: 15px; border: 1px solid var(--sg-line); text-align: start; vertical-align: top; }
.sg thead th { color: #fff !important; background: var(--sg-deep); }
.sg tbody th, .sg tfoot th { color: var(--sg-deep) !important; background: var(--sg-seafoam); }
.sg tfoot { font-weight: 800; }
.sg__small { color: #647376 !important; font-size: .85rem; }
.sg__days { position: relative; list-style: none; max-width: 920px; padding: 0; margin: 35px auto 0; counter-reset: day; }
.sg__days::before { content: ""; position: absolute; top: 0; bottom: 0; right: 77px; width: 2px; background: var(--sg-line); }
.sg__days li { position: relative; display: grid; grid-template-columns: 125px 1fr; gap: 28px; padding: 0 0 30px; }
.sg__days li > span { z-index: 1; align-self: start; padding: 8px 12px; border: 2px solid var(--sg-coral); color: var(--sg-deep); background: var(--sg-shell); font-weight: 900; text-align: center; }
.sg__days li > div { padding: 18px 22px; border-block-start: 1px solid var(--sg-line); background: #fff; }
.sg__days p { margin: 5px 0 0; }
.sg__safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.sg__safety-grid > div { padding: 22px; border-block-start: 5px solid var(--sg-sun); background: rgba(255,255,255,.08); }
.sg__safety-grid p { margin: 7px 0 0; }
.sg__mistakes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 42px; padding-inline-start: 1.5rem; }
.sg__mistakes li { padding: 10px 4px; border-block-end: 1px solid var(--sg-line); }
.sg__faq details { border-block-start: 1px solid var(--sg-line); }
.sg__faq details:last-child { border-block-end: 1px solid var(--sg-line); }
.sg__faq summary { padding: 19px 4px; color: var(--sg-deep); font-weight: 900; cursor: pointer; }
.sg__faq details p { padding: 0 22px 18px; }
.sg__sources { padding-inline-start: 1.2rem; }
.sg__sources li { margin-block: 8px; }
.sg__cta { padding: clamp(66px, 8vw, 104px) 0; color: #fff; background: var(--sg-coral); }
.sg__cta h2 { color: #fff !important; }
.sg__cta .sg__kicker { color: var(--sg-deep) !important; }
.sg__cta-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); gap: 50px; align-items: center; }
.sg__cta-grid > div:last-child { display: grid; gap: 20px; }
.sg__button--light { border-color: #fff; color: var(--sg-deep) !important; background: #fff; box-shadow: 6px 6px 0 var(--sg-deep); }
.sg__button--light:hover { color: var(--sg-deep) !important; box-shadow: 9px 9px 0 var(--sg-deep); }
.sg__cta-link { color: #fff !important; font-weight: 800; text-align: center; }
@media (max-width: 900px) {
	.sg__hero-grid, .sg__cta-grid { grid-template-columns: 1fr; }
	.sg__manifest { order: initial; max-width: 600px; }
	.sg__facts { grid-template-columns: repeat(2, 1fr); }
	.sg__islands { grid-template-columns: 1fr; }
	.sg__islands section:nth-child(2) { transform: none; }
	.sg__choice { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.sg { font-size: 16px; }
	.sg__wrap, .sg__narrow { width: min(100% - 28px, 1180px); }
	.sg__hero { padding-top: 52px; }
	.sg__manifest { padding: 18px; box-shadow: 9px 9px 0 rgba(15,119,117,.35); }
	.sg__verdict, .sg__facts, .sg__safety-grid, .sg__mistakes { grid-template-columns: 1fr; }
	.sg__verdict > div { border-inline-end: 0; border-block-end: 1px solid var(--sg-line); }
	.sg__checklist ul { columns: 1; }
	.sg__choice, .sg__plan-output { padding: 22px 18px; }
	.sg__choice button { flex: 1 1 calc(50% - 10px); padding-inline: 10px; }
	.sg__plan-route { grid-template-columns: 1fr; gap: 8px; }
	.sg__plan-route i { width: 1px; height: 14px; margin-inline: auto; }
	.sg__days::before { right: 41px; }
	.sg__days li { grid-template-columns: 84px 1fr; gap: 14px; }
	.sg__days li > span { padding-inline: 5px; }
	.sg__days li > div { padding: 13px; }
}
@media (max-width: 350px) {
	.sg__wrap, .sg__narrow { width: min(100% - 20px, 1180px); }
	.sg h1 { font-size: 2.25rem; }
	.sg h2 { font-size: 1.75rem; }
	.sg__manifest li { grid-template-columns: 28px 1fr; }
	.sg__manifest li > b { display: none; }
	.sg__days::before { display: none; }
	.sg__days li { grid-template-columns: 1fr; gap: 7px; }
	.sg__days li > span { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
	.sg *, .sg *::before, .sg *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media (forced-colors: active) {
	.sg__button, .sg__choice button, .sg__manifest, .sg__planner, .sg__table-wrap { border: 2px solid CanvasText; }
	.sg__choice button[aria-pressed="true"] { outline: 4px solid Highlight; }
}