/* CJ 360 — editorial / contemporary direction */
:root{
  --forest:#0b422e;
  --deep:#082b1e;
  --ink:#102a1c;
  --muted:#667a6b;
  --lime:#c0f17d;
  --lime-light:#e7f8cc;
  --cream:#f5f8f0;
}

body{background:#f7f9f4}
.container{width:min(1320px,calc(100% - 96px))}
.scroll-progress{position:fixed;left:0;top:0;z-index:300;width:0;height:3px;background:#a3ee6e;box-shadow:0 0 10px rgba(148,243,90,.4);pointer-events:none}
.eyebrow-strip{background:#08271b;letter-spacing:.19em}
.site-header{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(16,57,33,.07)}
.nav-wrap{height:94px}
.brand,.brand img{width:174px}
.nav{gap:36px}
.nav>a{font-size:13px;font-weight:700;position:relative;color:#45584a}
.nav>a:not(.nav-contact-mobile):after{content:'';position:absolute;bottom:-9px;left:0;width:0;height:2px;border-radius:2px;background:#2a884a;transition:width .25s}
.nav>a:hover:after,.nav>a[aria-current="page"]:after{width:100%}
.nav-cta{gap:16px;padding:9px 9px 9px 22px;border-radius:50px;background:#0a3928;font-size:12px;box-shadow:0 7px 20px rgba(17,71,41,.09)}
.nav-cta span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--lime);color:#123726;font-size:19px;line-height:1}
.nav-cta:hover{background:#125b3d}

/* Bright split editorial hero */
.hero{min-height:760px;isolation:isolate;background:radial-gradient(circle at 0 12%,#fff 0,#f3f7ed 55%,#eaf3e5 100%);color:#132b1d}
.hero:before{content:'360';position:absolute;left:-4%;bottom:-.35em;font-family:'Manrope',sans-serif;font-size:clamp(340px,34vw,650px);line-height:1;font-weight:800;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1.5px rgba(41,98,57,.07);pointer-events:none;z-index:0}
.hero-background{top:45px;left:auto;right:3.3%;bottom:50px;width:46.5%;height:auto;background:linear-gradient(0deg,rgba(6,38,23,.18),transparent 48%),url('assets/hero-garden.webp') 68% center/cover no-repeat;border-radius:225px 24px 24px 24px;box-shadow:0 35px 70px rgba(25,81,41,.15);transform:none}
.hero__inner{min-height:760px;align-items:center}
.hero-copy{position:relative;z-index:3;width:53%;padding:56px 45px 94px 0}
.hero-kicker{color:#25824b;font-size:11px;margin-bottom:27px;letter-spacing:.22em}
.hero-kicker-line{width:35px;background:#299c58;height:2px}
.hero h1{max-width:715px;margin-bottom:28px;font-size:clamp(56px,5.6vw,82px);line-height:1.095;letter-spacing:-.075em;font-weight:800;color:#102a1b}
.hero h1 em{color:#319558}
.hero-copy>p{color:#5a7262;font-size:16px;line-height:1.85;max-width:455px;margin-bottom:35px}
.hero-actions{gap:26px}
.hero .btn--lime{background:#0b432e;color:white;box-shadow:0 15px 30px rgba(10,68,39,.14)}
.hero .btn--lime:hover{background:#1f6c45}
.hero .text-action{border-bottom:1px solid #6fa382;color:#1e5c3b}
.hero-stamp{position:absolute;right:3px;top:84px;bottom:auto;z-index:3;width:132px;height:132px;border:7px solid #eff8e6;transform:rotate(11deg);background:#c0f17d;color:#123b25;backdrop-filter:none;box-shadow:0 18px 30px rgba(9,56,26,.12)}
.stamp-sparkle{font-size:32px;color:#116438}
.hero-stamp span:last-child{font-size:12px;line-height:1.35;font-weight:800}
.hero-image-note{position:absolute;right:6.4%;bottom:86px;z-index:4;display:flex;align-items:center;gap:14px;width:310px;min-height:81px;background:rgba(10,43,29,.86);backdrop-filter:blur(15px);color:white;border:1px solid rgba(255,255,255,.25);padding:17px 18px;border-radius:17px;box-shadow:0 18px 40px rgba(7,36,18,.2)}
.hero-image-note__mark{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;background:#c0f17d;border-radius:11px;color:#17462c;font-size:25px}
.hero-image-note strong{display:block;font:700 12px 'Manrope',sans-serif;margin-bottom:5px}
.hero-image-note small{font-size:8px;font-weight:800;letter-spacing:.11em;color:#c7e2cb}
.hero-side-label{right:4%;top:227px;color:#fff;font-size:8px;letter-spacing:.22em;z-index:2}

/* Floating proof-of-care ribbon */
.intro-points{background:transparent;border:0;position:relative;z-index:6;margin-top:-31px}
.intro-points__grid{background:white;border:1px solid #e2e9dd;border-radius:22px;box-shadow:0 23px 55px rgba(12,64,33,.08);padding:29px 38px;gap:30px}
.point-icon{width:54px;height:54px;border-radius:15px;background:#e4f7d1;color:#2c884c}
.point strong{font-size:13px}
.point p{font-size:12px}

/* Asymmetric premium service cards */
.services{background:#f7f9f4;padding:128px 0 135px}
.section-kicker{font-size:11px;letter-spacing:.21em;color:#248347}
.section-kicker:before{background:#81bf53;width:30px}
.section-header{gap:80px;margin-bottom:55px}
.section-header h2,.about h2,.gallery h2,.contact-copy h2{font-size:clamp(42px,4.4vw,65px);font-weight:800;line-height:1.16;letter-spacing:-.072em}
.section-header h2 span,.about h2 span,.gallery h2 span{color:#7b9982}
.section-header>p{font-size:14px;line-height:1.9}
.service-grid{grid-template-columns:1.055fr .945fr;align-items:start;gap:31px}
.service-card{border:1px solid #edf1e8;border-radius:25px;box-shadow:0 20px 58px rgba(10,53,28,.055);overflow:hidden;background:white}
.service-card:nth-child(2){margin-top:73px}
.service-card:hover{box-shadow:0 30px 66px rgba(10,53,28,.13);transform:translateY(-7px)}
.service-card__image{height:402px}
.service-card:nth-child(2) .service-card__image{height:329px}
.service-card__image img{filter:saturate(.98)}
.service-number{top:23px;left:23px;width:47px;height:47px;background:var(--lime);color:#143925;font-size:13px}
.service-image-caption{bottom:28px;left:32px;font-size:13px}
.service-card__content{padding:37px 39px 35px}
.service-card__heading h3{font-size:35px;letter-spacing:-.055em}
.service-arrow{border-color:#d9e8d4;background:#eff8e9;color:#1d6e3f;width:45px;height:45px}
.service-card__content>p{font-size:14px;line-height:1.9}
.service-list{gap:14px 24px}
.service-list li:before{background:#92c85f}
.card-link{font-size:13px}

/* Architectural profile */
.about{background:white;padding:142px 0}
.about__grid{grid-template-columns:.96fr 1.04fr;gap:10%;align-items:center}
.about__visual{margin-left:0;height:635px}
.about__visual:before{left:-25px;bottom:-25px;width:68%;height:67%;border:2px solid #c0e4b5;border-radius:23px}
.about__visual>img{border-radius:23px 170px 23px 23px;object-position:67% center}
.about__floating{left:auto;right:-54px;bottom:-19px;max-width:350px;padding:24px 25px;border-radius:18px;background:#e2f8c9;box-shadow:0 22px 50px rgba(4,40,21,.15)}
.about__floating p{font-size:17px}
.about__copy{padding-left:22px}
.about h2{font-size:clamp(40px,4vw,60px);margin-bottom:30px}
.about__lead{font-size:18px;color:#28543a}
.about__copy>p:not(.about__lead){line-height:2}
.inline-link{font-size:13px}

/* Rich, subdued value panels */
.vision{background:#082b1f;padding:124px 0 112px}
.vision:before{right:-180px;top:-335px;width:780px;height:780px;box-shadow:0 0 0 90px rgba(177,232,147,.035),0 0 0 182px rgba(177,232,147,.025);border-color:rgba(192,241,125,.18)}
.vision__intro{max-width:1000px}
.vision h2{font-size:clamp(49px,5.35vw,77px);line-height:1.14;max-width:975px}
.vision__intro>p{font-size:15px}
.vision__line{margin:66px 0 31px}
.values-grid{gap:20px}
.value{padding:31px 29px 32px;border:1px solid rgba(211,241,207,.15);border-radius:19px;background:linear-gradient(155deg,rgba(233,255,231,.08),rgba(233,255,231,.025));transition:background .25s,transform .25s}
.value:hover{background:rgba(211,255,202,.11);transform:translateY(-4px)}
.value h3{font-size:22px;margin:22px 0 11px}
.value p{font-size:13px;line-height:1.85}

/* Editorial image mosaic */
.gallery{background:#f6f9f3;padding:122px 0 133px}
.gallery-grid{grid-template-columns:1.12fr .88fr;grid-template-rows:245px 245px;gap:21px}
.gallery-item{height:100%;border-radius:19px;box-shadow:0 15px 35px rgba(9,47,24,.08)}
.gallery-item--wide{height:100%;grid-row:span 2}
.gallery-item figcaption{bottom:30px;left:30px;gap:9px}
.gallery-item figcaption strong{font-size:24px}
.gallery-item img{filter:saturate(.98)}
.gallery-note{margin-top:16px}

/* Dramatic conversion finale */
.contact-section{background:radial-gradient(circle at 16% 83%,#164e31 0,#0c3726 40%,#082b1e 78%);color:white;padding:125px 0}
.contact-section:before{width:690px;height:690px;left:-350px;top:-225px;border:90px solid rgba(190,244,129,.06)}
.contact-grid{grid-template-columns:1fr 465px;gap:10%;align-items:center}
.contact-copy .section-kicker{color:#bee992}
.contact-copy h2{font-size:clamp(48px,4.75vw,72px);color:#fff}
.contact-copy h2 em{color:#bdf07b}
.contact-copy>p{color:#c5d8c9;line-height:1.95;font-size:15px}
.contact-phone__icon{background:rgba(190,240,130,.16);color:#c0f17d;border:1px solid rgba(190,240,130,.18)}
.contact-phone>div>span{color:#b0c5b4}
.contact-phone a{color:white}
.contact-form{border:0;border-radius:25px;padding:43px;box-shadow:0 35px 85px rgba(3,23,13,.27);position:relative;overflow:hidden;color:#172c1f}
.contact-form:before{content:'';height:6px;position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,#53a966,#c7f17d)}
.contact-form h3{font-size:30px}
.contact-form .btn{border-radius:12px}
.footer{background:#061c15;padding-top:65px}
.footer__brand img{box-shadow:0 12px 30px rgba(0,0,0,.1)}
.whatsapp-float{box-shadow:0 13px 40px rgba(5,70,32,.32)}

/* Motion adds depth without hiding content when scripts are unavailable */
@media(prefers-reduced-motion:no-preference){
  .hero-copy{animation:rise-in .75s .08s both}
  .hero-background{animation:show-image 1.1s .05s both}
  .js-motion .reveal--pending{opacity:0;transform:translateY(35px)}
  .js-motion .reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js-motion .reveal--visible{opacity:1;transform:translateY(0)}
  @keyframes rise-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
  @keyframes show-image{from{opacity:.15;transform:translateY(24px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
}

@media(max-width:1120px){
  .container{width:min(100% - 70px,1320px)}
  .nav{gap:21px}
  .hero-copy{width:56%;padding-right:30px}
  .hero h1{font-size:clamp(52px,5.7vw,73px)}
  .hero-background{width:44%;right:3%}
  .hero-image-note{right:4%;width:280px}
  .about__grid{gap:6%}
  .about__floating{right:-15px}
  .contact-grid{gap:6%}
}

@media(max-width:940px){
  .container{width:calc(100% - 52px)}
  .nav-wrap{height:80px}
  .brand,.brand img{width:151px}
  .nav{gap:16px}
  .nav>a{font-size:11.5px}
  .nav-cta{font-size:11px;padding-left:15px}
  .hero,.hero__inner{min-height:710px}
  .hero h1{font-size:55px}
  .hero-copy{width:57%;padding-right:25px}
  .hero-background{top:37px;bottom:46px;right:2.8%;width:43%}
  .hero-stamp{width:104px;height:104px;right:4px;top:74px;border-width:5px}
  .hero-stamp span:last-child{font-size:10px}
  .hero-image-note{width:255px;right:4%;bottom:72px;padding:12px}
  .hero-image-note small{font-size:7px}
  .services{padding:105px 0}
  .service-card__image{height:325px}
  .service-card:nth-child(2) .service-card__image{height:265px}
  .service-card__content{padding:29px 25px}
  .service-card__heading h3{font-size:29px}
  .about{padding:100px 0}
  .about__visual{height:535px}
  .about__copy{padding-left:10px}
  .contact-grid{grid-template-columns:1fr 410px;gap:5%}
}

@media(max-width:760px){
  .container{width:calc(100% - 44px)}
  .nav-wrap{height:75px}
  .brand,.brand img{width:151px}
  .nav{top:75px;gap:0}
  .nav-cta{padding:7px 7px 7px 16px}
  .nav-cta span{width:32px;height:32px}
  .hero{min-height:0}
  .hero:before{font-size:70vw;bottom:115px;left:-12%}
  .hero__inner{min-height:0;display:block;padding-bottom:401px}
  .hero-copy{width:100%;max-width:620px;padding:73px 0 45px}
  .hero h1{font-size:clamp(47px,8.7vw,68px);max-width:600px}
  .hero-copy>p{font-size:15px;max-width:515px}
  .hero-background{top:auto;bottom:30px;left:22px;right:22px;width:calc(100% - 44px);height:360px;border-radius:155px 23px 23px 23px;background-position:70% center}
  .hero-stamp{top:auto;bottom:320px;right:21px;width:105px;height:105px}
  .hero-image-note{bottom:51px;right:47px;width:278px}
  .hero-side-label{display:none}
  .intro-points{margin-top:0}
  .intro-points__grid{padding:26px 27px;border-radius:20px}
  .services{padding:92px 0}
  .service-grid{grid-template-columns:1fr 1fr;gap:19px}
  .service-card:nth-child(2){margin-top:0}
  .service-card__image,.service-card:nth-child(2) .service-card__image{height:260px}
  .service-card__content{padding:25px}
  .service-list{grid-template-columns:1fr}
  .about__grid{grid-template-columns:1fr;gap:70px}
  .about__visual{height:540px;max-width:620px}
  .about__floating{right:-10px}
  .about__copy{padding:0}
  .vision{padding:92px 0}
  .vision h2{font-size:clamp(48px,7.4vw,65px)}
  .values-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .value{padding:22px 15px}
  .value h3{font-size:17px}
  .value p{font-size:12px}
  .gallery{padding:90px 0}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:300px 260px;gap:15px}
  .gallery-item--wide{grid-column:span 2;grid-row:auto}
  .contact-grid{grid-template-columns:1fr;gap:50px}
  .contact-copy h2{font-size:clamp(44px,7vw,63px)}
  .contact-form{max-width:560px;padding:35px}
}

@media(max-width:530px){
  .container{width:calc(100% - 38px)}
  .nav-wrap{height:72px}
  .nav{top:72px}
  .brand,.brand img{width:153px}
  .nav-cta{display:none}
  .hero__inner{padding-bottom:355px}
  .hero-copy{padding:56px 0 34px}
  .hero-kicker{font-size:9px;letter-spacing:.17em}
  .hero h1{font-size:clamp(43px,11.4vw,59px);line-height:1.09;letter-spacing:-.073em}
  .hero-copy>p{font-size:14px;line-height:1.75;margin-bottom:26px}
  .hero-actions{gap:18px}
  .hero-background{height:320px;left:14px;right:14px;width:calc(100% - 28px);bottom:16px;border-radius:120px 18px 18px 18px}
  .hero-stamp{width:90px;height:90px;right:7px;bottom:278px;border-width:4px}
  .stamp-sparkle{font-size:24px}
  .hero-stamp span:last-child{font-size:9px}
  .hero-image-note{right:27px;bottom:34px;width:259px;min-height:69px;padding:11px;gap:10px}
  .hero-image-note__mark{width:35px;height:35px;font-size:20px}
  .hero-image-note strong{font-size:11px}
  .hero-image-note small{font-size:7px}
  .intro-points__grid{padding:25px 23px;gap:17px}
  .services{padding:75px 0}
  .section-header h2,.about h2,.gallery h2{font-size:clamp(36px,9.8vw,49px)}
  .section-header{margin-bottom:31px}
  .service-grid{grid-template-columns:1fr;gap:24px}
  .service-card__image,.service-card:nth-child(2) .service-card__image{height:290px}
  .service-card__content{padding:28px}
  .service-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
  .service-card__heading h3{font-size:31px}
  .about{padding:87px 0}
  .about__grid{gap:60px}
  .about__visual{height:440px}
  .about__visual>img{border-radius:20px 120px 20px 20px}
  .about__floating{max-width:285px;padding:17px 18px;right:-5px;bottom:-23px}
  .about__floating p{font-size:13px}
  .vision{padding:80px 0}
  .vision h2{font-size:clamp(39px,10vw,53px)}
  .values-grid{grid-template-columns:1fr;gap:13px}
  .value{padding:23px 25px;border:1px solid rgba(211,241,207,.15)}
  .value h3{font-size:19px;margin:11px 0 8px}
  .value p{font-size:13px}
  .gallery{padding:80px 0}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:none;gap:15px}
  .gallery-item,.gallery-item--wide{height:308px;grid-column:auto;grid-row:auto}
  .gallery-item figcaption strong{font-size:20px}
  .contact-section{padding:82px 0}
  .contact-copy h2{font-size:clamp(41px,10.2vw,53px)}
  .contact-form{padding:30px 24px}
  .footer{padding-top:43px}
}