
/* Graphic enhancement v2: copy and functional HTML remain unchanged */
:root{
  --g-blue:#0f6fa5;--g-cyan:#49b6db;--g-navy:#072d4b;--g-green:#0d7a5f;
  --g-ice:#eaf6fb;--g-line:#c8e1ec;--g-gold:#c8a56a;
}
body{background:#f8fbfc}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:
  linear-gradient(90deg,rgba(11,82,120,.018) 1px,transparent 1px),
  linear-gradient(rgba(11,82,120,.014) 1px,transparent 1px);background-size:48px 48px}

/* header */
.header{border-bottom:0;box-shadow:0 10px 38px rgba(7,45,75,.08)}
.header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--g-cyan),var(--g-blue) 45%,var(--g-green))}
.brand strong{position:relative;padding-left:17px}
.brand strong:before{content:"";position:absolute;left:0;top:50%;width:7px;height:28px;transform:translateY(-50%) skewX(-18deg);background:linear-gradient(180deg,var(--g-cyan),var(--g-blue));box-shadow:7px 0 0 rgba(73,182,219,.25)}

/* hero */
.hero{min-height:720px;background:#e9f3f7}
.hero:before{background:
  radial-gradient(circle at 9% 14%,rgba(73,182,219,.22),transparent 18%),
  linear-gradient(117deg,rgba(250,253,254,.99) 0%,rgba(245,250,252,.95) 35%,rgba(234,246,251,.56) 55%,rgba(7,45,75,.08) 100%)}
.hero:after{height:6px;width:46%;background:linear-gradient(90deg,var(--g-gold),var(--g-cyan),transparent)}
.heroPhoto{inset:0 0 0 38%;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);filter:saturate(.95) contrast(1.06)}
.heroPhoto:after{background:linear-gradient(90deg,#edf5f8 0%,rgba(237,245,248,.92) 18%,rgba(237,245,248,.43) 50%,rgba(7,45,75,.06) 100%)}
.heroIn{min-height:720px}
.heroCopy{position:relative;z-index:2;max-width:800px}
.heroCopy:before{content:"";position:absolute;left:-36px;top:-18px;width:122px;height:122px;border:1px solid rgba(15,111,165,.18);border-radius:50%;box-shadow:0 0 0 23px rgba(73,182,219,.045),0 0 0 47px rgba(73,182,219,.025);pointer-events:none}
.heroCoverage span{border-radius:999px;background:linear-gradient(90deg,#082f4e,#0f6fa5);box-shadow:0 10px 24px rgba(7,45,75,.18)}
h1{color:#0a3353;text-shadow:0 1px 0 #fff}
.heroSub,.heroRole{position:relative}
.heroRole{padding-left:17px;border-left:3px solid var(--g-cyan)}
.hero .actions .btn{border-radius:8px}
.hero .actions .btn.primary{background:linear-gradient(135deg,#073456,#0f6fa5);box-shadow:0 16px 34px rgba(7,45,75,.22)}
.hero .actions .btn:not(.primary){background:rgba(255,255,255,.88);backdrop-filter:blur(12px)}

/* trust strip as icon-led band */
.trustStrip{background:linear-gradient(110deg,#062d4b 0%,#075d87 57%,#0a4966 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.trustIn{gap:14px;padding:22px 0}
.trustItem{position:relative;border:1px solid rgba(255,255,255,.12)!important;border-radius:14px;padding:22px 20px 22px 84px!important;background:rgba(255,255,255,.055);text-align:left!important;min-height:110px;display:flex;flex-direction:column;justify-content:center;backdrop-filter:blur(7px)}
.trustItem:before{content:"";position:absolute;left:22px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);background-repeat:no-repeat;background-position:center;background-size:25px}
.trustItem:nth-child(1):before{background-image:url("../images/icon-trust-01.svg")}
.trustItem:nth-child(2):before{background-image:url("../images/icon-trust-02.svg")}
.trustItem:nth-child(3):before{background-image:url("../images/icon-trust-03.svg")}

/* common section heading graphic */
.sectionHead,.historyHead,.networkIntro,.flowLayout,.faqLayout,.contactIn{position:relative}
.sectionHead:before,.historyHead:before{content:"";position:absolute;left:0;top:-24px;width:76px;height:5px;border-radius:4px;background:linear-gradient(90deg,var(--g-blue),var(--g-cyan))}
.section h2{color:#0a3758}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--g-blue)!important}
.eyebrow:before{content:"";width:24px;height:1px;background:currentColor}

/* concern cards */
.concernGrid{gap:18px;border:0!important;grid-template-columns:repeat(3,1fr)}
.concern{position:relative;overflow:hidden;border:1px solid #d9e8ef!important;border-radius:18px;padding:34px 28px 30px 28px!important;background:linear-gradient(180deg,#fff,#f8fbfc)!important;box-shadow:0 12px 28px rgba(7,45,75,.07)}
.concern:after{content:"";position:absolute;right:-34px;bottom:-48px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(73,182,219,.14),rgba(73,182,219,0) 68%)}
.concern .num{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;height:auto!important;min-height:38px;max-width:100%;padding:8px 12px;border-radius:12px;background:linear-gradient(135deg,#e4f5fb,#f7fbfd);border:1px solid #c8e4ef;color:var(--g-blue)!important;font-size:12px!important;font-weight:800;line-height:1.45;letter-spacing:.06em;white-space:normal;margin-bottom:18px!important}
.concern h3{position:relative;z-index:1;color:#123e5c}

/* services: magazine-like graphic cards */
.services{gap:22px}
.service{position:relative;border-radius:18px;border:1px solid #d7e7ee;box-shadow:0 14px 32px rgba(7,45,75,.08);background:#fff;overflow:hidden}
.service:before{content:"";position:absolute;z-index:3;left:0;top:0;width:5px;height:100%;background:linear-gradient(180deg,var(--g-cyan),var(--g-blue),var(--g-green));opacity:.95}
.service .media{aspect-ratio:16/10}
.service .media:after{background:linear-gradient(180deg,rgba(6,39,62,0) 45%,rgba(6,39,62,.30))}
.serviceBody{padding:26px 24px 24px 28px}
.service .eyebrow{display:inline-flex;width:max-content;border-radius:999px;padding:5px 10px;background:#edf7fb;font-size:10px!important;letter-spacing:.12em}
.service h3{min-height:auto;color:#0e3e61}
.service button{display:flex;justify-content:space-between;align-items:center;color:var(--g-blue);border-top:1px solid #e2edf2}
.service button:after{content:"↗";font-size:16px}

/* history: visual timeline */
.historySection{background:linear-gradient(180deg,#f6fbfd 0%,#eaf5f9 100%)}
.historySection:before{background:
  radial-gradient(circle at 100% 0%,rgba(73,182,219,.23),transparent 29%),
  linear-gradient(120deg,rgba(255,255,255,.85),rgba(235,247,251,.35))}
.historyTrack{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:0;background:transparent;padding-top:28px}
.historyTrack:before{content:"";position:absolute;left:4%;right:4%;top:11px;height:4px;border-radius:4px;background:linear-gradient(90deg,#b69b72 0%,#42a9d0 28%,#2682aa 52%,#3d9a7c 78%,#067142 100%)}
.historyItem{min-height:300px;padding:26px 19px 24px;border:1px solid #d6e6ed!important;border-right:0!important;background:rgba(255,255,255,.88);box-shadow:0 12px 26px rgba(7,45,75,.055)}
.historyItem:first-child{border-radius:16px 0 0 16px}.historyItem:last-child{border-radius:0 16px 16px 0;border-right:1px solid #d6e6ed!important}
.historyItem:before{top:-22px;left:50%;transform:translateX(-50%);width:16px;height:16px;background:#fff!important;border:4px solid var(--g-blue);box-shadow:0 0 0 5px rgba(73,182,219,.11)}
.historyItem:nth-child(1):before{border-color:#a58f69}.historyItem:nth-child(5):before{border-color:#3b9b7c}.historyItem:nth-child(6):before{border-color:#067142}
.historyYear{font-size:31px;color:#0d466b}.historyItem h3{font-size:15px}
.historyItem.key{background:linear-gradient(180deg,#f1fafe,#fff)}
.historyItem.now{background:linear-gradient(155deg,#073552,#08704f 120%)}
.historyConclusion{border-radius:16px;background:linear-gradient(105deg,#062f4e 0%,#075b80 62%,#08704f 125%);box-shadow:0 20px 44px rgba(7,45,75,.17);border-left:0;overflow:hidden;position:relative}
.historyConclusion:before{content:"";position:absolute;right:-30px;top:-50px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 30px rgba(255,255,255,.03),0 0 0 60px rgba(255,255,255,.018)}

/* network: make the role relation diagram visual */
.network{background:
  radial-gradient(circle at 78% 22%,rgba(73,182,219,.20),transparent 26%),
  linear-gradient(135deg,#042941,#063e5d 58%,#075a74 100%)}
.network:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.11) 1px,transparent 1.4px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent)}
.networkGrid{position:relative;z-index:2;align-items:center;gap:30px}
.party{position:relative;border-radius:16px;padding:34px 28px;border-color:rgba(255,255,255,.18);box-shadow:0 12px 32px rgba(0,0,0,.12)}
.party:not(.main):before{content:"";position:absolute;top:50%;width:30px;height:2px;background:#79c8e5}
.party:first-child:before{right:-30px}.party:last-child:before{left:-30px}
.party.main{border-radius:18px;transform:scale(1.035);border:1px solid rgba(255,255,255,.55);box-shadow:0 24px 62px rgba(0,0,0,.24)}
.party.main:before{width:5px;border-radius:5px;background:linear-gradient(180deg,var(--g-gold),var(--g-cyan))}
.roles span{border-radius:8px;padding:10px 12px;background:#f2f7f9;border:1px solid #d9e6eb}
.networkBottom{position:relative;z-index:2;padding:24px 26px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.04)}

/* case cards */
.caseGrid{gap:24px}
.case{border-radius:18px;overflow:hidden;border:1px solid #d8e7ee;box-shadow:0 14px 34px rgba(7,45,75,.08)}
.case .media{aspect-ratio:16/10}
.caseTag{border-radius:999px;padding:7px 12px;box-shadow:0 6px 16px rgba(7,45,75,.12);color:#0f557d}
.case h3{color:#0e3d5e}
.case dt{display:inline-block;background:#edf7fb;color:#0f6fa5;padding:4px 8px;border-radius:6px}
.case .btn{border-radius:9px}

/* process timeline */
#flow{background:linear-gradient(180deg,#eef7fa,#f9fcfd)}
.flowLayout{grid-template-columns:.74fr 1.45fr;gap:74px}
.steps{position:relative;padding-left:0}
.steps:before{content:"";position:absolute;left:25px;top:28px;bottom:28px;width:2px;background:linear-gradient(180deg,var(--g-cyan),var(--g-blue),var(--g-green))}
.step{position:relative;grid-template-columns:54px 1fr;border:0!important;padding:16px 0 22px}
.stepNum{position:relative;z-index:2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid #8fd1e8;color:#0f6fa5;box-shadow:0 7px 18px rgba(7,45,75,.10);font-family:Arial,sans-serif;font-size:16px;font-weight:800}
.step>div:last-child{background:#fff;border:1px solid #dce9ef;border-radius:14px;padding:20px 22px;box-shadow:0 9px 22px rgba(7,45,75,.055)}
.owner{border-radius:999px}
.ready{border:0;padding:20px 22px;border-radius:14px;background:linear-gradient(135deg,#e8f6fb,#f8fbfc);box-shadow:inset 4px 0 0 var(--g-cyan)}

/* FAQ */
#faq{background:#fff}
.faqLayout{gap:75px}
.faqLayout details{border:1px solid #dbe8ee;border-radius:12px;margin-bottom:12px;background:#fbfdfe;overflow:hidden;box-shadow:0 6px 18px rgba(7,45,75,.04)}
.faqLayout details summary{padding:21px 52px 21px 22px}
.faqLayout details[open]{background:#fff;box-shadow:0 12px 28px rgba(7,45,75,.07)}
.faqLayout details p{padding:0 22px 22px}
summary:after{right:20px!important;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#edf7fb;color:#0f6fa5!important}

/* contact */
.contact{background:
  radial-gradient(circle at 86% 20%,rgba(73,182,219,.22),transparent 27%),
  linear-gradient(120deg,#e9f5f9 0%,#f8fbfc 54%,#eef7f5 100%)}
.contactIn:before{content:"";position:absolute;left:-60px;top:50%;width:210px;height:210px;transform:translateY(-50%);border-radius:50%;border:1px solid rgba(15,111,165,.10);box-shadow:0 0 0 36px rgba(73,182,219,.035),0 0 0 72px rgba(73,182,219,.02)}
.contactActions{position:relative;border-radius:18px;background:rgba(255,255,255,.88);box-shadow:0 22px 48px rgba(7,45,75,.11)}
.contactActions:before{content:"CONTACT";position:absolute;top:-12px;right:20px;padding:5px 11px;border-radius:999px;background:#0f6fa5;color:#fff;font:700 10px/1 Arial,sans-serif;letter-spacing:.14em}
.contactActions .btn{border-radius:10px}

/* footer */
.footer{position:relative;background:linear-gradient(110deg,#042439,#063c59)}
.footer:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--g-cyan),var(--g-blue),var(--g-green))}

/* subtle reveal */
@media (prefers-reduced-motion:no-preference){
  .concern,.service,.historyItem,.case,.step>div:last-child,.party{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
  .concern:hover,.service:hover,.case:hover,.historyItem:hover{transform:translateY(-7px);box-shadow:0 24px 50px rgba(7,45,75,.13)}
  .party:hover{transform:translateY(-5px)}
  .party.main:hover{transform:scale(1.035) translateY(-5px)}
}

@media(max-width:1120px){
  .heroPhoto{inset:0 0 0 30%;clip-path:none}.heroCopy:before{display:none}
  .historyTrack{grid-template-columns:repeat(3,1fr);gap:14px}.historyTrack:before{display:none}
  .historyItem,.historyItem:first-child,.historyItem:last-child{border:1px solid #d6e6ed!important;border-radius:14px}.historyItem:before{display:none}
}
@media(max-width:800px){
  .hero{min-height:640px}.heroPhoto{inset:0;filter:saturate(.78)}.heroPhoto:after{background:linear-gradient(90deg,rgba(238,246,249,.99),rgba(238,246,249,.91) 66%,rgba(238,246,249,.58))}.heroIn{min-height:640px}
  .trustIn{gap:0}.trustItem{border-radius:0!important;border-left:0!important;border-right:0!important;padding:18px 16px 18px 74px!important;min-height:90px}.trustItem:before{left:16px;width:40px;height:40px}
  .concernGrid{grid-template-columns:1fr 1fr}.concern{padding:26px 22px!important}
  .historyTrack{grid-template-columns:1fr 1fr}
  .party:not(.main):before{display:none}.party.main{transform:none}.party.main:hover{transform:translateY(-5px)}
  .steps:before{left:22px}.step{grid-template-columns:48px 1fr}.stepNum{width:46px;height:46px}
}
@media(max-width:480px){
  .hero{min-height:610px}.heroIn{min-height:610px}.heroCoverage span{border-radius:8px}
  .concernGrid{grid-template-columns:1fr}.concern .num{width:auto!important;height:auto!important;min-height:36px;padding:7px 10px}
  .historyTrack{grid-template-columns:1fr}.historyItem{min-height:0}
  .service,.case,.contactActions,.faqLayout details{border-radius:12px}
  .flowLayout{gap:34px}.steps:before{display:none}.step{grid-template-columns:1fr}.stepNum{margin-bottom:-10px}.step>div:last-child{padding:18px}
}

/* Fix: prevent concern badge/title overlap */
.concern h3{margin-top:0!important;margin-bottom:12px!important;line-height:1.65!important}
.concern p{position:relative;z-index:1}
