/* ============================================================
   PIMEX GROUP, INC — v2 Design tokens
   Premium corporate maritime/logistics identity.
   Deep navy + white + light grey, restrained blue/teal/gold accents.
   Display: Plus Jakarta Sans. Body: Inter.
   ============================================================ */

:root{
  --navy:#2E388D;
  --navy-2:#242C72;
  --navy-soft:#3F49A0;
  --ink:#10233A;
  --grey-900:#243447;
  --grey-600:#5B6B7E;
  --grey-300:#D7DEE6;
  --grey-100:#F5F7FA;
  --white:#FFFFFF;
  --blue:#29AAE1;
  --blue-bright:#5FC6EC;
  --teal:#5FC6EC;
  --gold:#29AAE1;

  --font-display:'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body:'Inter', -apple-system, sans-serif;

  --edge:78rem;
  --radius-sm:3px;
  --radius-md:4px;
  --radius-lg:4px;
  --shadow-sm:0 1px 2px rgba(46,56,141,0.06);
  --shadow-md:0 2px 8px rgba(46,56,141,0.07);
  --shadow-lg:0 6px 20px rgba(46,56,141,0.10);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.08; margin:0; color:var(--navy);}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}

.wrap{max-width:var(--edge); margin:0 auto; padding:0 1.75rem;}

/* ---------- Reveal-on-scroll (single orchestrated pattern, not per-card) ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.86); backdrop-filter:blur(8px); border-bottom:1px solid transparent; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;}
.site-header.scrolled{background:rgba(255,255,255,0.97); border-bottom-color:var(--grey-300); box-shadow:var(--shadow-sm);}
.cta-caps{text-transform:uppercase; letter-spacing:0.05em; font-size:0.82rem;}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:1rem 0;}
.brand{display:flex; align-items:center; gap:0.65rem;}
.brand-logo{height:44px; width:auto; display:block;}

.nav-links{display:flex; align-items:center; gap:2.1rem;}
.nav-links a{font-size:0.93rem; font-weight:500; color:var(--grey-600);}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--navy);}
.nav-cta{background:var(--blue); color:var(--white) !important; padding:0.65rem 1.3rem; border-radius:999px; font-size:0.82rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; box-shadow:var(--shadow-sm); transition:background .15s ease, transform .15s ease;}
.nav-cta:hover{background:var(--navy); transform:translateY(-1px);}

.nav-toggle{display:none; background:none; border:1px solid var(--grey-300); border-radius:8px; color:var(--navy); width:42px; height:38px; align-items:center; justify-content:center; cursor:pointer;}
.nav-toggle svg{width:20px; height:20px;}

@media (max-width:900px){
  .nav-links{position:fixed; inset:64px 0 0 0; background:var(--white); flex-direction:column; align-items:flex-start; gap:0; padding:0.5rem 1.75rem 2rem; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; border-top:1px solid var(--grey-300); overflow-y:auto;}
  .nav-links.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-links a{width:100%; padding:0.95rem 0; border-bottom:1px solid var(--grey-100); font-size:1.05rem;}
  .nav-cta{margin-top:1.1rem; text-align:center;}
  .nav-toggle{display:flex;}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:0.5rem; padding:0.9rem 1.6rem; font-size:0.95rem; font-weight:600; border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; border:1px solid transparent;}
.btn-solid{background:var(--blue); color:var(--white); box-shadow:var(--shadow-sm);}
.btn-solid:hover{background:var(--navy); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--grey-300);}
.btn-outline:hover{border-color:var(--navy); background:var(--grey-100);}
.btn-white{background:var(--white); color:var(--navy);}
.btn-white:hover{background:var(--grey-100); transform:translateY(-1px);}
.btn-ghost-on-dark{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4);}
.btn-ghost-on-dark:hover{background:rgba(255,255,255,0.1); border-color:var(--white);}

/* ---------- Hero slideshow (flat, minimal, left-gradient — matches reference) ---------- */
.hero{position:relative; min-height:82vh; overflow:hidden; color:var(--white);}
.hero-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s ease; display:flex; align-items:center;}
.hero-slide.active{opacity:1; visibility:visible; z-index:1;}
.hero-slide .hero-bg{position:absolute; inset:0; z-index:0;}
.hero-slide .hero-bg img{width:100%; height:100%; object-fit:cover;}
.hero-slide .hero-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,25,84,0.88) 0%, rgba(20,25,84,0.62) 32%, rgba(20,25,84,0.22) 58%, rgba(20,25,84,0) 78%);}
.hero-content{position:relative; z-index:1; width:100%; max-width:34rem;}
.hero-eyebrow{display:block; font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#8FDCF5; margin-bottom:1.1rem;}
.hero h1{font-size:clamp(2.3rem, 4.6vw, 3.6rem); font-weight:800; color:var(--white); max-width:14ch; line-height:1.08;}
.hero p.lede{margin-top:1.1rem; max-width:38ch; font-size:1rem; color:rgba(255,255,255,0.82); line-height:1.55;}
.hero-actions{display:flex; gap:0.85rem; margin-top:1.9rem; flex-wrap:wrap;}
.hero-actions .btn{border-radius:3px; padding:0.8rem 1.4rem; font-size:0.9rem;}
.hero-actions .btn-solid{background:var(--white); color:var(--navy); box-shadow:none;}
.hero-actions .btn-solid:hover{background:rgba(255,255,255,0.88); color:var(--navy); transform:none;}
.hero-actions .btn-ghost-on-dark{border-color:rgba(255,255,255,0.55);}

.hero-tag{position:absolute; right:1.25rem; bottom:1.1rem; z-index:4; display:flex; align-items:center; gap:0.4rem; font-size:0.78rem; color:rgba(255,255,255,0.85);}
.hero-tag .dot{width:5px; height:5px; border-radius:50%; background:var(--teal);}

.hero-controls-wrap{position:absolute; left:0; right:0; bottom:2.5rem; z-index:4; pointer-events:none;}
.hero-controls-wrap .wrap{pointer-events:none;}
.hero-controls{position:relative; z-index:2; display:flex; align-items:center; gap:0.5rem; pointer-events:auto; width:fit-content;}
.hero-arrow{width:34px; height:34px; border-radius:50%; background:transparent; border:1px solid rgba(255,255,255,0.35); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, border-color .15s ease; flex:none;}
.hero-arrow:hover{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.6);}
.hero-arrow svg{width:14px; height:14px;}

.hero-dots{display:flex; gap:0.5rem;}
.hero-dots button{width:34px; height:34px; border-radius:50%; background:transparent; border:1px solid rgba(255,255,255,0.35); padding:0; cursor:pointer; transition:background .2s ease, border-color .2s ease; position:relative;}
.hero-dots button::after{content:''; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.55);}
.hero-dots button.active{background:var(--white); border-color:var(--white);}
.hero-dots button.active::after{background:var(--navy);}

@media (max-width:640px){.hero{min-height:74vh;} .hero-tag{display:none;}}

/* ---------- Hero slide transition: square-tile mosaic dissolve ---------- */
.hero-tiles{
  position:absolute; inset:0; z-index:3;
  display:none;
  pointer-events:none;
}
.hero-tiles.show{display:grid;}
.hero-tile{
  position:relative;
  background-repeat:no-repeat;
  opacity:1;
  filter:blur(0px) brightness(1);
  transform:scale(1);
  transition:opacity 1.15s cubic-bezier(.22,1,.36,1),
             filter 1.15s cubic-bezier(.22,1,.36,1),
             transform 1.15s cubic-bezier(.22,1,.36,1);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.09),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 0 10px rgba(255,255,255,0.03);
}
.hero-tiles.dissolve .hero-tile{
  opacity:0;
  filter:blur(4px) brightness(1.05);
  transform:scale(0.965);
}
@media (prefers-reduced-motion: reduce){
  .hero-tiles{display:none !important;}
}

/* ---------- Section scaffolding ---------- */
.section{padding:6rem 0;}
.section-tight{padding:4.5rem 0;}
.section-grey{background:var(--grey-100);}
.section-navy{background:var(--navy); color:var(--white);}
.section-navy h2, .section-navy h3{color:var(--white);}
.section-head{max-width:42rem; margin:0 auto 3.2rem; text-align:center;}
.section-head.left{margin:0 0 3.2rem; text-align:left;}
.eyebrow{display:inline-block; font-size:0.82rem; font-weight:700; letter-spacing:0.03em; color:var(--blue); margin-bottom:0.9rem;}
.section-navy .eyebrow{color:var(--teal);}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);}
.section-head p{margin-top:1rem; font-size:1.05rem; color:var(--grey-600);}
.section-navy .section-head p{color:rgba(255,255,255,0.78);}

/* ---------- Split (image / text) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;}
.split.rev .split-media{order:2;}
@media (max-width:900px){.split, .split.rev{grid-template-columns:1fr;} .split.rev .split-media{order:0;}}
.split-media{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; aspect-ratio:4/3;}
.split-media img{width:100%; height:100%; object-fit:cover;}
.split h2{font-size:clamp(1.9rem,3.2vw,2.5rem); margin-bottom:1.2rem;}
.split p{color:var(--grey-600); margin-bottom:1.1rem; max-width:46ch;}
.split p:last-of-type{margin-bottom:1.6rem;}

/* ---------- Edge-to-edge service strip (directly under hero, matches reference) ---------- */
.service-strip{display:grid; grid-template-columns:repeat(6,1fr);}
@media (max-width:900px){.service-strip{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.service-strip{grid-template-columns:repeat(2,1fr);}}
.service-strip a{display:block; border-right:1px solid var(--grey-300); border-bottom:1px solid var(--grey-300);}
.service-strip a:last-child{border-right:none;}
.service-strip .thumb{aspect-ratio:1/1; overflow:hidden; background:var(--grey-100);}
.service-strip .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.service-strip a:hover .thumb img{transform:scale(1.06);}
.service-strip .cap{padding:0.85rem 0.9rem 1.05rem;}
.service-strip .cap .row{display:flex; align-items:center; gap:0.4rem;}
.service-strip .cap svg{width:14px; height:14px; stroke:var(--blue); flex:none;}
.service-strip .cap h3{font-size:0.86rem; font-weight:700; color:var(--navy);}
.service-strip .cap p{font-size:0.76rem; color:var(--grey-600); margin-top:0.2rem;}


/* ---------- Feature blocks (why choose) — numbered, minimal, no card chrome ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem;}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.feature-grid{grid-template-columns:1fr;}}
.feature{text-align:left; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.16);}
.feature .num{font-family:var(--font-display); font-size:0.85rem; font-weight:700; color:var(--teal); margin-bottom:0.9rem; display:block;}
.feature h3{font-size:1.05rem; color:var(--white); margin-bottom:0.5rem;}
.feature p{font-size:0.88rem; color:rgba(255,255,255,0.68);}

/* ---------- Image-card grid (industries) ---------- */
.img-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem;}
@media (max-width:900px){.img-card-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.img-card-grid{grid-template-columns:1fr;}}
.img-card{position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease;}
.img-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px);}
.img-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.img-card:hover img{transform:scale(1.05);}
.img-card::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(46,56,141,0.88) 0%, rgba(46,56,141,0.15) 55%, rgba(46,56,141,0) 75%);}
.img-card .label{position:absolute; left:1.4rem; right:3rem; bottom:1.3rem; z-index:1; color:var(--white); font-family:var(--font-display); font-weight:700; font-size:1.15rem;}
.img-card .go{position:absolute; right:1.3rem; bottom:1.3rem; z-index:1; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease;}
.img-card .go svg{width:14px; height:14px; stroke:var(--white);}
.img-card:hover .go{opacity:1; transform:translateX(0);}

/* ---------- Vision/Mission — editorial, no card chrome ---------- */
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem;}
@media (max-width:760px){.vm-grid{grid-template-columns:1fr; gap:2.5rem;}}
.vm-card{padding-left:1.75rem; border-left:2px solid var(--blue);}
.vm-card.mission{border-left-color:var(--teal);}
.vm-card h3{font-size:0.85rem; font-weight:700; letter-spacing:0.06em; color:var(--grey-600); margin-bottom:0.9rem; text-transform:uppercase;}
.vm-card p{color:var(--navy); font-size:1.35rem; font-family:var(--font-display); font-weight:600; line-height:1.3;}

/* ---------- Values grid ---------- */
.value-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem;}
@media (max-width:1000px){.value-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.value-grid{grid-template-columns:1fr;}}
.value{background:var(--grey-100); border-radius:var(--radius-md); padding:1.8rem 1.5rem;}
.value h3{font-size:1.02rem; margin-bottom:0.5rem;}
.value p{font-size:0.88rem; color:var(--grey-600);}

/* ---------- Journey / global connection — abstract minimal flow, not a dashboard ---------- */
.journey{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.5rem;}
.journey.reveal{opacity:1; transform:none;} /* container itself doesn't fade — children animate individually */
.journey-step{text-align:center; padding:0 0.5rem; opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.journey.in .journey-step{opacity:1; transform:translateY(0);}
.journey-step:nth-child(1){transition-delay:0s;}
.journey-step:nth-child(3){transition-delay:.3s;}
.journey-step:nth-child(5){transition-delay:.6s;}
.journey-step:nth-child(7){transition-delay:.9s;}
.journey-step h4{font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--navy); letter-spacing:0.01em;}
.journey-step p{font-size:0.8rem; color:var(--grey-600); margin-top:0.35rem;}

.journey-arrow{width:44px; height:1px; background:var(--grey-300); position:relative; margin:0 0.25rem; transform:scaleX(0); transform-origin:left center; opacity:0; transition:transform .5s ease, opacity .3s ease;}
.journey.in .journey-arrow{opacity:1; transform:scaleX(1);}
.journey-arrow:nth-child(2){transition-delay:.15s;}
.journey-arrow:nth-child(4){transition-delay:.45s;}
.journey-arrow:nth-child(6){transition-delay:.75s;}
.journey-arrow::before{content:''; position:absolute; right:0; top:50%; width:6px; height:6px; border-top:1px solid var(--grey-600); border-right:1px solid var(--grey-600); transform:translateY(-50%) rotate(45deg);}
.journey-arrow::after{content:''; position:absolute; top:50%; left:0; width:5px; height:5px; border-radius:50%; background:var(--blue); transform:translate(-50%,-50%); opacity:0;}
.journey.in .journey-arrow::after{animation:flowdot-x 2.4s ease-in-out infinite;}
.journey-arrow:nth-child(2)::after{animation-delay:.4s;}
.journey-arrow:nth-child(4)::after{animation-delay:1.2s;}
.journey-arrow:nth-child(6)::after{animation-delay:2s;}
@keyframes flowdot-x{
  0%{left:0; opacity:0;}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{left:100%; opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .journey.in .journey-arrow::after{animation:none; opacity:0;}
}

@media (max-width:700px){
  .journey{flex-direction:column;}
  .journey-arrow{width:1px; height:22px; transform:scaleY(0); transform-origin:top center;}
  .journey.in .journey-arrow{transform:scaleY(1);}
  .journey-arrow::before{right:50%; top:auto; bottom:0; transform:translateX(50%) rotate(135deg);}
  .journey-arrow::after{top:0; left:50%; transform:translate(-50%,-50%);}
  .journey.in .journey-arrow::after{animation-name:flowdot-y;}
  @keyframes flowdot-y{
    0%{top:0; opacity:0;}
    12%{opacity:1;}
    88%{opacity:1;}
    100%{top:100%; opacity:0;}
  }
}

/* ---------- CTA band (image) ---------- */
.cta-band{position:relative; color:var(--white); overflow:hidden;}
.cta-band .bg{position:absolute; inset:0;}
.cta-band .bg img{width:100%; height:100%; object-fit:cover;}
.cta-band .bg::after{content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(46,56,141,0.92), rgba(46,56,141,0.75));}
.cta-band .wrap{position:relative; z-index:1; padding:4.5rem 1.75rem; text-align:center;}
.cta-band h2{color:var(--white); font-size:clamp(1.9rem,3.6vw,2.6rem); max-width:24ch; margin:0 auto 0.9rem;}
.cta-band p{color:rgba(255,255,255,0.85); max-width:38ch; margin:0 auto 1.8rem;}
.cta-band .actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}
.cta-band .actions .btn{text-transform:uppercase; letter-spacing:0.04em; font-size:0.88rem;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:rgba(255,255,255,0.8); padding-top:4rem;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem;}
.footer-grid h4{font-size:0.8rem; letter-spacing:0.06em; color:var(--white); margin-bottom:1.1rem; font-weight:700;}
.footer-grid ul li{margin-bottom:0.65rem;}
.footer-grid ul li a{font-size:0.9rem; color:rgba(255,255,255,0.7);}
.footer-grid ul li a:hover{color:var(--white);}
.footer-logo{height:40px; width:auto; display:block; margin-bottom:1rem;}
.footer-brand p{color:rgba(255,255,255,0.65); font-size:0.9rem; max-width:32ch;}
.social-row{display:flex; gap:0.7rem; margin-top:1.3rem;}
.social-row a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease;}
.social-row a:hover{background:rgba(255,255,255,0.1); border-color:var(--white);}
.social-row svg{width:16px; height:16px; stroke:var(--white);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.14); padding:1.3rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; font-size:0.8rem; color:rgba(255,255,255,0.55);}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:2rem;}}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{position:relative; color:var(--white); overflow:hidden; padding:8.5rem 0 4.5rem;}
.page-hero .bg{position:absolute; inset:0;}
.page-hero .bg img{width:100%; height:100%; object-fit:cover;}
.page-hero .bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(46,56,141,0.82), rgba(46,56,141,0.88));}
.page-hero .content{position:relative; z-index:1;}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem); color:var(--white); max-width:20ch;}
.page-hero p{margin-top:1.1rem; max-width:52ch; color:rgba(255,255,255,0.85); font-size:1.05rem;}

/* ---------- Service detail rows ---------- */
.service-detail{display:grid; grid-template-columns:0.95fr 1.05fr; gap:3rem; align-items:center; padding:4.2rem 0; border-bottom:1px solid var(--grey-300);}
.service-detail.rev{grid-template-columns:1.05fr 0.95fr;}
.service-detail.rev .service-media{order:2;}
@media (max-width:900px){.service-detail,.service-detail.rev{grid-template-columns:1fr;} .service-detail.rev .service-media{order:0;}}
.service-media{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3;}
.service-media img{width:100%; height:100%; object-fit:cover;}
.service-num{font-family:var(--font-display); font-size:0.85rem; font-weight:700; color:var(--grey-300); letter-spacing:0.05em; margin-bottom:0.6rem;}
.service-tag{display:inline-block; font-size:0.8rem; font-weight:700; color:var(--blue); background:rgba(41,170,225,0.12); padding:0.35rem 0.8rem; border-radius:999px; margin-bottom:1rem;}
.service-detail h2{font-size:clamp(1.6rem,2.8vw,2.15rem); margin-bottom:1rem;}
.service-detail > div > p{color:var(--grey-600); margin-bottom:1.2rem; max-width:46ch;}
.service-points{display:grid; gap:0.6rem;}
.service-points li{display:flex; align-items:flex-start; gap:0.7rem; font-size:0.95rem; color:var(--grey-900);}
.service-points li svg{width:18px; height:18px; stroke:var(--teal); flex:none; margin-top:0.15rem;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:3rem;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{background:var(--navy); color:var(--white); border-radius:var(--radius-lg); padding:2.4rem; box-shadow:var(--shadow-md);}
.contact-line{display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,0.14);}
.contact-line:last-child{border-bottom:none;}
.contact-line .icon-badge{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; flex:none;}
.contact-line .icon-badge svg{width:18px; height:18px; stroke:var(--teal);}
.contact-line .k{font-size:0.74rem; letter-spacing:0.05em; color:rgba(255,255,255,0.55); margin-bottom:0.3rem;}
.contact-line .v{font-size:0.98rem;}
.contact-line .v a:hover{color:var(--teal);}

.form-card{background:var(--white); border:1px solid var(--grey-300); border-radius:var(--radius-lg); padding:2.4rem; box-shadow:var(--shadow-sm);}
.field{margin-bottom:1.3rem;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.field label{display:block; font-size:0.82rem; font-weight:600; color:var(--grey-900); margin-bottom:0.5rem;}
.field input, .field textarea, .field select{width:100%; background:var(--grey-100); border:1px solid var(--grey-300); border-radius:var(--radius-sm); color:var(--ink); padding:0.8rem 0.95rem; font-family:var(--font-body); font-size:0.95rem; transition:border-color .15s ease, background .15s ease;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--blue); background:var(--white);}
.field textarea{resize:vertical; min-height:120px;}
.form-note{font-size:0.85rem; color:var(--grey-600); margin-top:1rem;}
.form-success{display:none; background:rgba(95,198,236,0.14); border:1px solid var(--teal); border-radius:var(--radius-sm); padding:1.1rem 1.3rem; margin-bottom:1.4rem; font-size:0.95rem; color:var(--navy);}
.form-success.show{display:block;}

.map-frame{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:1.75rem; aspect-ratio:16/9;}
.map-frame img{width:100%; height:100%; object-fit:cover;}