/*
 * COSMO / Art Direction II
 * Section-specific visual storytelling, deliberately lighter than video/Lottie.
 * Real text remains in HTML; effects are purely decorative and work without JS.
 */
:root{
  --art-pine:#153e38;
  --art-jade:#2c765d;
  --art-gold:#c7a674;
  --art-gold-pale:#e9d5ac;
  --art-paper:#faf9f2;
  --art-ease:cubic-bezier(.22,1,.36,1);
  --art-shadow:0 19px 54px rgba(15,51,44,.10);
}
/* Cohesive editorial material and quieter typography across all 15 scripts. */
:where(.benefit-section,.market-local-section,.cosmo-guide-overview,.pr-main,.cost-tiers-section,.advisor-search-section){
  background-image:radial-gradient(ellipse at 91% 4%,rgba(185,160,101,.075),transparent 43%),radial-gradient(ellipse at 5% 94%,rgba(85,142,113,.064),transparent 40%);
}
:where(.pr-hero,.advisor-hero,.cosmo-guide-hero,.cost-hero,.closing,.pr-next,.cosmo-guide-end,.cost-contact-cta){
  position:relative;isolation:isolate;overflow:hidden;
}
:where(.pr-hero,.advisor-hero,.cosmo-guide-hero,.cost-hero,.closing,.pr-next,.cosmo-guide-end,.cost-contact-cta)> .container{
  position:relative;z-index:1;
}
/* Home: gold cartographic contour behind the typography, slow horizon on photo. */
.hero-copy{background-image:radial-gradient(ellipse at 92% 12%,rgba(234,216,172,.46),transparent 42%),radial-gradient(ellipse at 3% 85%,rgba(96,151,125,.14),transparent 53%),linear-gradient(128deg,#fdfbf4 0%,#edf3ec 73%,#e9efe7 100%)}
.hero-copy-inner::before{
  content:"";position:absolute;inset-inline-start:max(40px,calc((100vw - var(--container))/2));top:clamp(23px,3vw,38px);
  height:1px;width:min(17vw,135px);
  background:linear-gradient(90deg,var(--art-gold),rgba(199,166,116,0));opacity:.78;pointer-events:none;
}
.hero-image-wrap::before{
  content:"";position:absolute;z-index:1;pointer-events:none;width:clamp(230px,39vw,540px);aspect-ratio:1;
  border:1px solid rgba(236,218,173,.41);border-radius:50%;
  box-shadow:0 0 0 30px rgba(230,219,181,.058),0 0 0 77px rgba(235,220,183,.039),inset 0 0 43px rgba(236,214,161,.08);
  inset-block-start:13%;inset-inline-end:-26%;opacity:.82;
  animation:artMaritimeRing 22s ease-in-out infinite alternate;
}
.hero .eyebrow,.page-intro .eyebrow{letter-spacing:.16em}
.hero .btn-primary{box-shadow:0 12px 30px rgba(22,83,68,.2)}
.hero-image-note{background:linear-gradient(90deg,rgba(16,47,45,.16),transparent);border-inline-start:2px solid rgba(234,204,148,.65);padding-inline-start:clamp(15px,2vw,22px)}
/* Destination/guide/residency pages: distinct contours, no video download. */
.cosmo-guide-hero{
  background-image:radial-gradient(circle at 81% 35%,rgba(199,167,105,.21),transparent 32%),linear-gradient(118deg,#0d302e,#1d5546 79%,#2c6650);
}
.cosmo-guide-hero::after,.pr-hero::after,.advisor-hero::after,.cost-hero::after{
  content:"";position:absolute;pointer-events:none;width:min(67vw,810px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(216,191,137,.18);box-shadow:0 0 0 57px rgba(214,181,116,.045),0 0 0 122px rgba(216,193,137,.026);
  inset-block-start:-75%;inset-inline-end:-16%;opacity:.86;
  animation:artMaritimeRing 19s ease-in-out infinite alternate;
}
.pr-hero{background-image:radial-gradient(ellipse at 88% 13%,rgba(163,205,162,.18),transparent 43%),linear-gradient(120deg,#103c38,#21594a 65%,#326e53)}
.pr-hero::after{border-style:dashed;inset-block-start:-95%;inset-inline-end:-13%;animation-duration:26s}
.advisor-hero{background-image:radial-gradient(circle at 83% 28%,rgba(219,194,137,.19),transparent 35%),linear-gradient(117deg,#103630,#205645 78%,#286a52)}
.advisor-hero::after{width:min(50vw,680px);border-style:dotted;opacity:.52;inset-block-start:-97%}
.cost-hero{isolation:isolate;background-image:radial-gradient(ellipse at 85% 10%,rgba(236,220,187,.4),transparent 47%),linear-gradient(120deg,#f9f7ed,#eaf1e8)}
.cost-hero::after{border-color:rgba(146,118,71,.17);inset-block-start:-110%}
.pr-hero h1,.cosmo-guide-hero h1,.advisor-hero h1,.cost-hero h1{letter-spacing:-.04em;text-wrap:balance}
:where(.pr-hero,.cosmo-guide-hero,.advisor-hero) .eyebrow{display:inline-flex;align-items:center;gap:11px}
:where(.pr-hero,.cosmo-guide-hero,.advisor-hero) .eyebrow::before{content:"";display:inline-block;width:29px;height:1px;background:linear-gradient(90deg,#c5a56e,rgba(199,166,116,.2))}
.cost-hero-figure{position:relative;isolation:isolate;overflow:hidden;box-shadow:0 22px 65px rgba(18,51,42,.14)}
.cost-hero-figure::after{content:"";position:absolute;pointer-events:none;z-index:0;inset:-30%;background:linear-gradient(108deg,transparent 40%,rgba(255,255,255,.32) 50%,transparent 60%);transform:translateX(-110%) rotate(-7deg)}
.art-seen .cost-hero-figure::after{animation:artSweep 1.7s .5s var(--art-ease) both}
.cost-hero-figure>*{position:relative;z-index:1}
/* Local advantages: editorial blocks with a luminous, tactile focus. */
.market-value-section{background-color:#f7f8f1}
.market-value-section .market-local-heading{position:relative}
.market-value-section .market-local-heading::after{content:"";display:block;width:clamp(68px,8vw,132px);height:2px;margin-top:24px;background:linear-gradient(90deg,#a98452,#d3bd91,transparent);transform-origin:left center;transform:scaleX(.5);opacity:.7}
.market-value-section.art-seen .market-local-heading::after{transform:scaleX(1);transition:transform 1.2s var(--art-ease),opacity 1s;opacity:1}
.market-value-grid{gap:clamp(14px,1.5vw,24px)}
.market-value-card,.market-case{isolation:isolate;position:relative;overflow:hidden;border-radius:2px}
.market-value-card{box-shadow:0 10px 33px rgba(31,69,53,.04);border-top-width:3px;transition:transform .55s var(--art-ease),box-shadow .5s,border-color .5s}
.market-value-card::before,.market-case::before,.pr-route::before,.cosmo-guide-fact::before{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle 260px at var(--art-x,50%) var(--art-y,36%),rgba(224,195,139,.18),transparent 75%);
  transition:opacity .5s;
}
.market-value-card>:not(:empty),.market-case>:not(:empty),.pr-route>:not(:empty),.cosmo-guide-fact>:not(:empty){position:relative;z-index:1}
.market-value-card:hover,.market-case:hover,.pr-route:hover{border-color:rgba(175,146,94,.6);box-shadow:0 24px 62px rgba(23,63,52,.13)}
.market-value-card:hover{transform:translate3d(0,-8px,0)}
.market-value-card:hover::before,.market-case:hover::before,.pr-route:hover::before,.cosmo-guide-fact:hover::before{opacity:1}
.market-value-card .market-value-lead{border-inline-start-color:#bca173;background:linear-gradient(110deg,rgba(229,243,232,.96),rgba(243,247,235,.94))}
.market-value-card .market-n,.market-priority .market-n{font-variant-numeric:tabular-nums;letter-spacing:.12em}
.market-case{transition:transform .45s var(--art-ease),box-shadow .5s,border-color .4s}
.market-case:hover{transform:translate3d(0,-5px,0)}
.market-case-label{letter-spacing:.075em}
.market-fit-single>div{border-inline-start:3px solid #8cab96!important}
/* Fee cards: ink and gold—crisp price, one subtle sweep when the card enters. */
.cost-tier{position:relative;isolation:isolate;overflow:hidden;box-shadow:0 9px 34px rgba(12,54,41,.055)}
.cost-tier::after{content:"";position:absolute;pointer-events:none;inset-block-start:0;inset-inline-start:0;width:100%;height:3px;background:linear-gradient(90deg,#bc9761,#edd4a1,#9dbe9e);transform-origin:left;transform:scaleX(0)}
.cost-tier.cosmo-visible::after{transform:scaleX(1);transition:transform 1.2s var(--art-ease) .3s}
.cost-tier-amount{font-feature-settings:"tnum";letter-spacing:-.055em}
.cost-tier-number{opacity:.72}
.cost-tier:hover{box-shadow:0 24px 57px rgba(21,70,51,.17);transform:translate3d(0,-6px,0)}
.cost-tier-action{transition:transform .3s var(--art-ease),background .3s}
.cost-tier:hover .cost-tier-action{transform:translate3d(0,-2px,0)}
.cost-part{transition:border-color .4s,background .4s,transform .35s}
.cost-part:hover{background:#fdfcf7;border-color:#d7c5a2}
.cost-steps{position:relative}
.cost-step{position:relative;isolation:isolate}
.cost-step::before{content:"";position:absolute;width:9px;height:9px;inset-block-start:-5px;inset-inline-start:0;background:#c5a06b;border:2px solid #f2eadb;border-radius:50%;box-shadow:0 0 0 5px rgba(194,159,101,.1)}
/* Application journey: one vertical moving progress line, no fabricated time estimates. */
.cosmo-guide-stages,.pr-process-list{position:relative;--art-journey:0%}
.cosmo-guide-stages{padding-inline-start:clamp(19px,3vw,30px);border-top:0}
.cosmo-guide-stages::before,.cosmo-guide-stages::after{content:"";position:absolute;pointer-events:none;width:2px;inset-inline-start:7px;inset-block-start:5px}
.cosmo-guide-stages::before{height:calc(100% - 14px);background:rgba(124,161,140,.21)}
.cosmo-guide-stages::after{height:var(--art-journey);max-height:calc(100% - 14px);background:linear-gradient(180deg,#b18b57,#4c9578);box-shadow:0 0 12px rgba(88,151,119,.24)}
.cosmo-guide-stage{position:relative;transition:background-color .3s,padding-inline-start .3s}
.cosmo-guide-stage::before{content:"";position:absolute;inset-inline-start:-28px;inset-block-start:26px;width:13px;height:13px;border:2px solid #b99b66;background:#f6f6ef;border-radius:50%;box-shadow:0 0 0 4px #edf2e9;z-index:1}
.cosmo-guide-stage:hover{background-color:rgba(232,243,232,.5)}
.pr-process-list{padding-inline-start:23px}
.pr-process-list::before,.pr-process-list::after{content:"";position:absolute;inset-inline-start:9px;inset-block-start:19px;width:2px}
.pr-process-list::before{height:calc(100% - 38px);background:#d3e1d5}
.pr-process-list::after{height:var(--art-journey);max-height:calc(100% - 38px);background:linear-gradient(#baa074,#4b9979)}
.pr-process-list li{position:relative;box-shadow:0 5px 22px rgba(18,65,52,.04);transition:background .35s,box-shadow .35s,border-color .35s}
.pr-process-list li::before{content:"";position:absolute;inset-inline-start:-20px;inset-block-start:22px;width:12px;height:12px;background:#f8f8f1;border:2px solid #ac936d;border-radius:50%;z-index:1}
.pr-process-list li:hover{background:#f8fbf6;border-color:#aacbbb;box-shadow:0 13px 25px rgba(26,80,62,.08)}
.cosmo-guide-checklist li,.pr-document-list li{transition:background .35s,transform .3s,border-color .35s}
.cosmo-guide-checklist li:hover,.pr-document-list li:hover{background:#f2f7f0;border-color:#b1cdbc;transform:translateX(4px)}
html[dir=rtl] .cosmo-guide-checklist li:hover,html[dir=rtl] .pr-document-list li:hover{transform:translateX(-4px)}
/* FAQ: warm disclosure interaction, native <details> semantics and keyboard support. */
:where(.faq-item,.cost-faq,.cosmo-guide-question,.pr-qa,.advisor-faq-card){
  transition:border-color .33s,background-color .33s,box-shadow .33s;
}
:where(.faq-item,.cost-faq,.cosmo-guide-question,.pr-qa)[open]{
  border-color:rgba(106,158,129,.64);background:#fffefb;box-shadow:0 13px 38px rgba(27,70,55,.065);
}
:where(.faq-item,.cost-faq,.cosmo-guide-question,.pr-qa) summary{transition:color .22s,background-color .22s}
:where(.faq-item,.cost-faq,.cosmo-guide-question,.pr-qa) summary:hover{background:rgba(211,233,216,.23)}
:where(.faq-item,.cost-faq,.cosmo-guide-question,.pr-qa) summary:focus-visible{outline-offset:-3px}
:where(.cosmo-guide-question,.pr-qa)[open] summary>span:last-child{transition:transform .35s var(--art-ease);transform:rotate(45deg)}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  :where(.faq-item,.cost-faq,.cosmo-guide-question,.pr-qa,.market-card-condition)::details-content{
    block-size:0;overflow:clip;transition:block-size .37s var(--art-ease),content-visibility .37s allow-discrete;
  }
  :where(.faq-item,.cost-faq,.cosmo-guide-question,.pr-qa,.market-card-condition)[open]::details-content{block-size:auto}
}
/* Self-service advisor: an attentive search interface, not a fake live AI agent. */
.advisor-searchbar{position:relative;isolation:isolate;transition:filter .4s}
.advisor-searchbar::after{content:"";position:absolute;inset:-5px;z-index:-1;border-radius:10px;background:linear-gradient(110deg,rgba(170,195,157,.22),rgba(203,167,101,.19));opacity:0;transform:scale(.992);transition:opacity .35s,transform .35s}
.advisor-searchbar:focus-within::after{opacity:1;transform:scale(1)}
.advisor-searchbar input:focus{box-shadow:0 12px 35px rgba(37,100,76,.09)}
.advisor-faq-card{transition:box-shadow .35s,border-color .35s,transform .35s}
.advisor-faq-card:hover{box-shadow:var(--art-shadow);border-color:#b6cfb6}
.advisor-precheck{background-image:radial-gradient(circle at 87% 5%,rgba(210,188,133,.09),transparent 45%)}
.advisor-precheck select:focus,.advisor-precheck input:focus{outline-offset:2px}
/* Contact: polished individual methods without obscuring email or telephone. */
.contact-panel,.form-card,.enquiry-wrapper{position:relative}
.contact-method{position:relative}
.contact-method::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:0;height:2px;width:0;transition:width .5s var(--art-ease);background:linear-gradient(90deg,#a38356,#79a98b)}
.contact-method:hover::before,.contact-method:focus-within::before{width:min(180px,46%)}
:where(.contact-panel,.form-card,.enquiry-wrapper):focus-within{border-color:rgba(87,147,116,.55);box-shadow:0 17px 49px rgba(21,66,52,.065)}
/* Closings: brand finish, almost imperceptible aurora rather than flashing particles. */
:where(.closing,.pr-next,.cosmo-guide-end,.cost-contact-cta){background-image:radial-gradient(ellipse at 80% 12%,rgba(199,170,104,.19),transparent 40%),radial-gradient(ellipse at 10% 87%,rgba(99,152,121,.14),transparent 43%),linear-gradient(114deg,#103732,#23574a)}
:where(.closing,.pr-next,.cosmo-guide-end,.cost-contact-cta)::after{
  content:"";pointer-events:none;position:absolute;inset-inline-end:-14%;inset-block-start:-150px;width:min(52vw,620px);aspect-ratio:1;
  border:1px solid rgba(223,201,153,.22);border-radius:50%;box-shadow:0 0 0 58px rgba(222,202,145,.046),0 0 0 118px rgba(222,202,145,.025);
  animation:artMaritimeRing 25s ease-in-out infinite alternate;
}
:where(.closing,.pr-next,.cosmo-guide-end,.cost-contact-cta) .btn{position:relative;z-index:2;transition:transform .3s var(--art-ease),box-shadow .3s}
:where(.closing,.pr-next,.cosmo-guide-end,.cost-contact-cta) .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(1,23,19,.18)}
/* Advanced scroll choreography appears only if the element is actually observed. */
.art-seen :where(.market-value-card,.market-case,.pr-route,.cost-tier){backface-visibility:hidden}
@keyframes artMaritimeRing{0%{transform:translate3d(0,0,0) rotate(-5deg);opacity:.45}100%{transform:translate3d(-15px,12px,0) rotate(8deg);opacity:.9}}
@keyframes artSweep{from{transform:translateX(-120%) rotate(-7deg)}to{transform:translateX(150%) rotate(-7deg)}}
@media(hover:none),(pointer:coarse){
 .market-value-card:hover,.market-case:hover,.pr-route:hover,.cost-tier:hover{transform:none}
 .market-value-card::before,.market-case::before,.pr-route::before,.cosmo-guide-fact::before{display:none}
}
@media(max-width:940px){
 .hero-image-wrap::before{width:300px;inset-inline-end:-120px}
 .cosmo-guide-hero::after,.pr-hero::after,.advisor-hero::after,.cost-hero::after{width:500px;inset-inline-end:-200px}
}
@media(max-width:680px){
 .hero-image-wrap::before{width:225px;inset-inline-end:-90px}
 .hero-copy-inner::before{display:none}
 .cosmo-guide-hero::after,.pr-hero::after,.advisor-hero::after,.cost-hero::after{opacity:.4;width:350px;inset-inline-end:-190px;inset-block-start:-180px}
 .market-value-card:hover,.market-case:hover,.pr-route:hover,.cost-tier:hover{box-shadow:none}
 .cost-hero-figure{box-shadow:0 9px 28px rgba(16,61,50,.1)}
 .pr-process-list{padding-inline-start:17px}
 .pr-process-list::before,.pr-process-list::after{inset-inline-start:5px}
 .pr-process-list li::before{inset-inline-start:-16px}
 .market-value-card .market-value-lead{border-inline-start-width:2px}
}

/* The DSP guide table of contents becomes a quiet reading compass. */
.cosmo-guide-toc a{position:relative;transition:color .28s var(--art-ease),background .28s;border-radius:2px}
.cosmo-guide-toc a::after{content:"";position:absolute;inset-inline-start:11px;inset-inline-end:11px;inset-block-end:3px;height:2px;background:linear-gradient(90deg,#ac8b59,#5a987a);transform:scaleX(0);transform-origin:left center;transition:transform .48s var(--art-ease)}
.cosmo-guide-toc a.art-toc-current{color:#225c4c;background:rgba(214,232,216,.55)}
.cosmo-guide-toc a.art-toc-current::after{transform:scaleX(1)}
html[dir=rtl] .cosmo-guide-toc a::after,html[dir=rtl] .market-local-heading::after{transform-origin:right center}
.cost-step.cosmo-visible::before{animation:artNodeLight .9s var(--art-ease) .22s both}
@keyframes artNodeLight{from{box-shadow:0 0 0 0 rgba(190,159,96,.25);background:#d3dacd}to{box-shadow:0 0 0 5px rgba(194,159,101,.10);background:#c5a06b}}
@media(prefers-reduced-motion:reduce){
 .cosmo-guide-toc a::after{transform:scaleX(1)}
 .cost-step.cosmo-visible::before{animation:none}
}
/* Accessibility: respect reduced motion, contrast, touch and energy constraints. */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .hero-image-wrap::before,.cosmo-guide-hero::after,.pr-hero::after,.advisor-hero::after,.cost-hero::after{opacity:.35;transform:none!important}
 .cost-tier::after{transform:scaleX(1)!important}
 .cosmo-guide-stages::after,.pr-process-list::after{height:100%!important}
 .market-value-section .market-local-heading::after{transform:scaleX(1)!important}
}
@media(prefers-contrast:more){
 .market-value-card,.pr-route,.cost-tier,.cosmo-guide-question,.pr-qa{border-width:2px}
 .hero-image-wrap::before,.cosmo-guide-hero::after,.pr-hero::after,.advisor-hero::after,.cost-hero::after{opacity:.18}
 :where(.market-value-card,.pr-route,.cost-tier) :focus-visible{outline:3px solid currentColor;outline-offset:4px}
}
