/* ==========================================================================
   LegalPro Bali — service page layout
   Built from the six "Website Layout" PDFs supplied 2026-08-15.

   The PDFs set the structure: band, image-and-intro, service table, CTA.
   The colour is taken from the brand rather than the PDFs, whose pale blue
   band is the layout document's own styling and clashes with the orange and
   navy in the logo and the commissioned hero art.

   Self-contained. No Bootstrap, no jQuery, no icon kit, no external requests.
   ========================================================================== */

@font-face{font-family:'Newsreader';src:url(assets/fonts/web/Newsreader-300.woff2) format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url(assets/fonts/web/IBMPlexSans-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url(assets/fonts/web/IBMPlexSans-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Sampled from the client's own branded document (brand-palette-reference.jpg):
     navy #061953, teal #088395, orange #F79848. Navy is the dominant colour and
     carries the bands; teal is the link and secondary accent; orange is the
     call to action and the bullet. */
  --navy:#061953;
  --navy-deep:#001446;
  --navy-line:#12295F;
  --teal:#088395;
  --teal-bright:#0AA3B8;
  /* Body links need a darker teal than the fill colour: #088395 lands at 4.48:1
     on white, just under the 4.5:1 AA threshold. This one is 5.3:1. */
  --teal-link:#077785;
  --orange:#F79848;
  --orange-deep:#E8842E;
  --ink:#101B33;
  --body:#3E4A63;
  --muted:#6B7690;
  --rule:#E1E4EA;
  --rule-soft:#EFF1F5;
  --paper:#FFFFFF;
  --wash:#F6F8FA;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Plex',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--body);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal-link); text-underline-offset:3px}
a:hover{color:var(--navy)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--navy); color:#fff; padding:10px 16px; z-index:99}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--rule); background:var(--paper);
  position:sticky; top:0; z-index:40}
.head-in{display:flex; align-items:center; gap:20px; min-height:78px}
.brand{flex:0 0 auto; margin-right:auto}
.brand img{width:168px}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--rule);
  border-radius:5px; padding:9px 11px; cursor:pointer; color:var(--navy)}
.nav-toggle span{display:block; width:20px; height:2px; background:currentColor; margin:4px 0}
.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav a{color:var(--navy); text-decoration:none; font-size:.87rem; font-weight:600;
  letter-spacing:.01em; padding:10px 12px; border-radius:5px; white-space:nowrap}
.nav a:hover{background:var(--wash); color:var(--teal-link)}
.nav a[aria-current="page"]{color:var(--teal-link)}
/* White on #F79848 is only 2.2:1. Navy on the same orange is 7.5:1, and
   matches the reference, where orange is a fill and never a text colour. */
.nav .cta{background:var(--orange); color:var(--navy); padding:11px 18px; margin-left:8px}
.nav .cta:hover{background:var(--navy); color:#fff}

/* dropdown */
.has-sub{position:relative}
.has-sub > button{font:600 .87rem/1 var(--sans); color:var(--navy); background:none;
  border:0; padding:10px 12px; border-radius:5px; cursor:pointer; display:flex;
  align-items:center; gap:6px}
.has-sub > button:hover{background:var(--wash); color:var(--teal-link)}
.has-sub > button::after{content:""; width:6px; height:6px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.sub{position:absolute; top:calc(100% + 6px); left:0; min-width:288px; background:var(--paper);
  border:1px solid var(--rule); border-radius:7px; padding:7px; display:none;
  box-shadow:0 14px 34px rgba(0,48,56,.13)}
.has-sub:hover .sub, .has-sub:focus-within .sub, .sub.open{display:block}
.sub a{display:block; font-weight:400; padding:9px 12px; white-space:normal}

/* ---------- page band ---------- */
.band{background:var(--navy); color:#fff; padding:64px 0 60px; position:relative}
.band::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--orange) 0 34%,var(--teal) 34% 64%,var(--navy-deep) 64%)}
.band .crumb{font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--teal-bright); margin:0 0 16px}
.band .crumb a{color:var(--teal-bright); text-decoration:none}
.band .crumb a:hover{color:#fff}
.band h1{font:300 clamp(2.15rem,5.6vw,3.5rem)/1.12 var(--serif); color:#fff;
  margin:0; letter-spacing:-.008em; max-width:19ch}

/* Overlapping diamonds, echoing the motif in the client's branded documents.
   Drawn as inline SVG rather than rotated CSS boxes: a rotated box grows to
   1.41x its width and gets clipped by the band, which is fiddly to correct at
   every breakpoint. Decorative, so it is aria-hidden and drops on narrow
   screens where it would crowd the heading. */
.band{overflow:hidden}
.band .motif{position:absolute; right:4%; top:50%; width:228px; height:228px;
  transform:translateY(-50%); pointer-events:none; opacity:.95}
.band .motif svg{display:block; width:100%; height:100%}
@media (max-width:1080px){ .band .motif{right:1.5%; width:180px; height:180px; opacity:.8} }
@media (max-width:860px){ .band .motif{display:none} }

/* ---------- intro: image + text ---------- */
.intro{padding:52px 0 8px}
.intro-grid{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:38px;
  align-items:start; border-top:1px solid var(--rule); padding-top:34px}
.intro figure{margin:0}
.intro figure img{border-radius:8px; width:100%}
.intro figcaption{font-size:.76rem; color:var(--muted); margin-top:10px}
.intro-copy > p{margin:0 0 18px; max-width:64ch; font-size:1.02rem}
.intro-copy > p:last-child{margin-bottom:0}

/* ---------- services table ---------- */
.services{padding:56px 0 20px}
.services h2{font:300 clamp(1.7rem,4.2vw,2.4rem)/1.2 var(--serif); color:var(--navy);
  margin:0 0 26px; letter-spacing:-.005em}
.svc{border-top:2px solid var(--navy)}
.svc-row{display:grid; grid-template-columns:minmax(0,236px) minmax(0,262px) minmax(0,1fr);
  gap:14px 30px; padding:22px 0; border-bottom:1px solid var(--rule)}
.svc-row.no-mid{grid-template-columns:minmax(0,236px) minmax(0,1fr)}
/* The CTA band supplies its own top rule, so the final row must not draw one
   too, or the two stack up as a double line with a gap between them. */
.svc-row:last-child{border-bottom:0}
.svc-cat{font-weight:600; color:var(--navy); font-size:.97rem; line-height:1.45}
.svc-cat.cont{color:transparent; user-select:none}
.svc-name{color:var(--ink); font-size:.97rem; line-height:1.5}
.svc-items{margin:0; padding:0; list-style:none}
.svc-items li{position:relative; padding-left:17px; margin-bottom:7px; font-size:.94rem;
  color:var(--body); line-height:1.5}
.svc-items li:last-child{margin-bottom:0}
.svc-items li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--orange)}

/* Term-plus-prose services, for pages whose source describes each service in a
   paragraph rather than listing sub-items. */
.svc-detail{padding:24px 0; border-bottom:1px solid var(--rule)}
.svc-detail:last-child{border-bottom:0}
.svc-detail h3{margin:0 0 8px; font:600 1.06rem/1.45 var(--sans); color:var(--navy)}
.svc-detail p{margin:0; max-width:74ch; font-size:.98rem}

/* Numbered process, for services written as an ordered sequence. */
.svc-steps{list-style:none; counter-reset:st; margin:0; padding:0}
.svc-steps li{counter-increment:st; position:relative; padding:20px 0 20px 52px;
  border-bottom:1px solid var(--rule); font-size:.99rem; color:var(--body); max-width:74ch}
.svc-steps li:last-child{border-bottom:0}
.svc-steps li::before{content:counter(st); position:absolute; left:0; top:18px;
  width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff;
  font:600 .85rem/32px var(--sans); text-align:center}
@media (max-width:760px){ .svc-steps li{padding-left:44px} }

/* ---------- CTA ---------- */
.cta-band{margin:44px 0 0; padding:38px 0 0; border-top:1px solid var(--rule)}
.cta-in{background:var(--wash); border:1px solid var(--rule); border-radius:10px;
  padding:32px 30px; display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap}
.cta-in p{margin:0; font:300 1.32rem/1.35 var(--serif); color:var(--navy); max-width:34ch}
.btn{display:inline-block; background:var(--orange); color:var(--navy); text-decoration:none;
  font-weight:600; font-size:.93rem; letter-spacing:.02em; padding:15px 30px;
  border-radius:6px; white-space:nowrap}
.btn:hover{background:var(--navy); color:#fff}
.btn.ghost{background:transparent; color:var(--navy); border:1.5px solid var(--rule)}
.btn.ghost:hover{border-color:var(--navy); background:transparent; color:var(--navy)}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- footer ---------- */
.site-foot{margin-top:72px; background:var(--navy); color:#B6C0D8; padding:52px 0 26px;
  font-size:.92rem}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:34px}
.site-foot h3{font:600 .74rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--teal-bright); margin:0 0 16px}
.site-foot a{color:#DFE5F2; text-decoration:none}
.site-foot a:hover{color:var(--orange)}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:9px}
.site-foot .addr{font-style:normal; line-height:1.7}
.foot-base{margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.82rem; color:#8C97B5}

/* floating WhatsApp */
.wa{position:fixed; right:16px; bottom:16px; z-index:50; background:#25D366; color:#fff;
  text-decoration:none; font-weight:600; font-size:.88rem; padding:13px 19px;
  border-radius:30px; box-shadow:0 6px 20px rgba(0,0,0,.22)}
.wa:hover{background:#1EB855; color:#fff}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .intro-grid{grid-template-columns:1fr; gap:26px}
  .intro figure{max-width:520px}
  .svc-row{grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:12px 24px}
  .svc-row .svc-items{grid-column:2}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav-toggle{display:block}
  .nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--rule); flex-direction:column; align-items:stretch;
    gap:0; padding:10px 14px 18px; box-shadow:0 14px 30px rgba(0,48,56,.12)}
  .nav.open{display:flex}
  .site-head{position:static}
  .head-in{position:relative; min-height:66px}
  .nav a,.has-sub > button{padding:12px 10px; width:100%; text-align:left; white-space:normal}
  .has-sub > button{justify-content:space-between}
  .sub{position:static; display:none; border:0; box-shadow:none; padding:0 0 6px 12px;
    border-left:2px solid var(--rule-soft); margin:0 0 6px 10px; min-width:0}
  .has-sub:hover .sub{display:none}
  .sub.open{display:block}
  .nav .cta{margin:10px 0 0; text-align:center}
  .band{padding:44px 0 42px}
  .intro{padding:36px 0 4px}
  .services{padding:40px 0 12px}
  .svc-row,.svc-row.no-mid{grid-template-columns:1fr; gap:8px; padding:20px 0}
  .svc-row .svc-items{grid-column:1}
  .svc-cat.cont{display:none}
  .cta-in{padding:26px 22px; flex-direction:column; align-items:flex-start}
  .btn{width:100%; text-align:center}
  .cta-actions{width:100%; flex-direction:column}
  .wa{right:12px; bottom:12px; padding:12px 16px; font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}
@media print{
  .site-head,.wa,.cta-band,.nav-toggle{display:none}
  body{font-size:11pt; color:#000}
  .band{background:#fff; color:#000; padding:0 0 12pt}
  .band h1{color:#000}
  .site-foot{background:#fff; color:#000; margin-top:20pt}
}

/* ==========================================================================
   Site-wide components, added when the design rolled out beyond the service
   pages: homepage, about, services index, contact, blog index and articles.
   ========================================================================== */

/* ---------- homepage hero ---------- */
.hero{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.hero-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,44%); gap:48px;
  align-items:center; padding:76px 0 80px}
.hero .eyebrow{font:600 .76rem/1 var(--sans); letter-spacing:.19em; text-transform:uppercase;
  color:var(--teal-bright); margin:0 0 20px}
.hero h1{font:300 clamp(2.4rem,6vw,4rem)/1.08 var(--serif); margin:0 0 22px;
  letter-spacing:-.012em; color:#fff; max-width:14ch}
.hero p.lede{font-size:1.08rem; color:#C6D0E6; margin:0 0 32px; max-width:52ch}
.hero-actions{display:flex; gap:13px; flex-wrap:wrap}
.hero figure{margin:0}
.hero figure img{border-radius:10px; width:100%}

/* ---------- section scaffolding ---------- */
.sec{padding:74px 0}
.sec.tint{background:var(--wash)}
.sec-head{margin:0 0 38px; max-width:62ch}
.sec-head .eyebrow{font:600 .74rem/1 var(--sans); letter-spacing:.19em; text-transform:uppercase;
  color:var(--teal-link); margin:0 0 14px}
.sec-head h2{font:300 clamp(1.8rem,4.4vw,2.6rem)/1.18 var(--serif); color:var(--navy);
  margin:0 0 14px; letter-spacing:-.006em}
.sec-head p{margin:0; font-size:1.02rem; max-width:64ch}

/* ---------- partner logos ---------- */
.logos{display:flex; align-items:center; gap:38px; flex-wrap:wrap; padding:30px 0 0;
  border-top:1px solid var(--rule); margin-top:38px}
/* These are professional body memberships (PERADI, AKPI and so on), which are
   credibility markers for a law firm. Greying them out works against that. */
.logos img{height:46px; width:auto; opacity:.9}

/* ---------- card grid ---------- */
/* Separate bordered cards rather than one bordered container with hairline gaps.
   The service count is odd, so the container technique leaves an empty cell that
   renders as a grey block wherever the row does not fill. */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(246px,1fr)); gap:16px}
.card{background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  padding:26px 24px 28px; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; transition:border-color .15s, background .15s}
.card:hover{background:var(--wash); border-color:var(--teal)}
.card .ic{width:38px; height:38px; margin-bottom:16px; color:var(--teal)}
.card .ic svg{width:100%; height:100%; display:block}
.card h3{font:600 1.03rem/1.35 var(--sans); color:var(--navy); margin:0 0 9px}
.card p{margin:0; font-size:.92rem; color:var(--body); line-height:1.55}
.card .more{margin-top:16px; font:600 .82rem/1 var(--sans); color:var(--teal-link);
  letter-spacing:.02em}

/* ---------- split: image beside copy ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:46px; align-items:center}
.split + .split{margin-top:66px}
.split.flip .sp-media{order:2}
.split figure{margin:0}
.split figure img{border-radius:10px; width:100%}
.split h3{font:300 clamp(1.5rem,3.4vw,2rem)/1.22 var(--serif); color:var(--navy); margin:0 0 16px}
.split p{margin:0 0 15px; max-width:58ch}
.split p:last-child{margin-bottom:0}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:20px}
.quote{background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  padding:28px 26px; display:flex; flex-direction:column}
.sec.tint .quote{background:var(--paper)}
.quote .mark{font:300 2.6rem/1 var(--serif); color:var(--orange); margin:0 0 6px}
.quote p{margin:0 0 20px; font-size:.95rem; line-height:1.62}
.quote footer{margin-top:auto; padding-top:16px; border-top:1px solid var(--rule);
  background:none; font:600 .88rem/1.4 var(--sans); color:var(--navy)}
.quote footer span{display:block; font-weight:400; font-size:.8rem; color:var(--muted); margin-top:3px}

/* ---------- full-width CTA ---------- */
.cta-full{background:var(--navy); color:#fff; padding:58px 0}
.cta-full .in{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
.cta-full h2{font:300 clamp(1.7rem,4vw,2.3rem)/1.2 var(--serif); color:#fff; margin:0; max-width:22ch}
.cta-full p{margin:9px 0 0; color:#C6D0E6; max-width:46ch}

/* ---------- article prose ---------- */
.prose{max-width:70ch}
.prose h2{font:300 1.68rem/1.24 var(--serif); color:var(--navy); margin:38px 0 12px}
.prose h3{font:600 1.06rem/1.4 var(--sans); color:var(--navy); margin:30px 0 10px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 17px; padding-left:20px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--orange)}
.prose img{border-radius:9px; margin:24px 0}
.prose blockquote{margin:26px 0; padding:0 0 0 22px; border-left:3px solid var(--orange);
  font:300 1.2rem/1.5 var(--serif); color:var(--navy)}
.meta{font:400 .8rem/1.5 var(--sans); color:var(--muted); margin:0 0 26px;
  display:flex; gap:16px; flex-wrap:wrap}
.meta span{display:inline-flex; align-items:center; gap:7px}

/* ---------- blog index ---------- */
.postlist{display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:26px}
.post{border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--paper);
  display:flex; flex-direction:column; text-decoration:none; color:inherit}
.post:hover{border-color:var(--teal)}
.post img{width:100%; aspect-ratio:16/10; object-fit:cover}
.post .body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.post h3{font:600 1.05rem/1.4 var(--sans); color:var(--navy); margin:0 0 10px}
.post p{margin:0; font-size:.92rem; color:var(--body)}
.post .more{margin-top:16px; font:600 .82rem/1 var(--sans); color:var(--teal-link)}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:46px;
  align-items:start}
.field{margin-bottom:16px}
.field label{display:block; font:600 .82rem/1 var(--sans); color:var(--navy); margin-bottom:7px}
.field input,.field select,.field textarea{width:100%; font:400 .95rem/1.5 var(--sans);
  color:var(--ink); background:var(--paper); border:1px solid var(--rule); border-radius:6px;
  padding:12px 14px}
.field textarea{min-height:132px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);
  outline-offset:1px; border-color:var(--teal)}
.form-note{margin:0 0 20px; padding:13px 16px; border-left:3px solid var(--orange);
  background:#FFF6EF; color:#6B4A22; font-size:.88rem; line-height:1.55; border-radius:5px}
.formmsg{display:none; margin-top:14px; padding:12px 15px; border-radius:6px; font-size:.9rem}
.formmsg.ok{display:block; background:#EAF6F3; color:#0C5B4E; border:1px solid #BFE3DA}
.formmsg.err{display:block; background:#FDEEE8; color:#8A3312; border:1px solid #F3CBB9}
.details{background:var(--wash); border:1px solid var(--rule); border-radius:10px; padding:28px 26px}
.details dl{margin:0}
.details dt{font:600 .72rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-link); margin:0 0 7px}
.details dd{margin:0 0 22px; font-size:.96rem; line-height:1.6; color:var(--body)}
.details dd:last-child{margin-bottom:0}
.details a{color:var(--navy); text-decoration:none; font-weight:600}
.details a:hover{color:var(--teal-link)}
.mapwrap{margin-top:44px; border:1px solid var(--rule); border-radius:10px; overflow:hidden;
  line-height:0}
.mapwrap iframe{width:100%; height:400px; border:0; display:block}

@media (max-width:940px){
  .hero-in{grid-template-columns:1fr; gap:34px; padding:52px 0 56px}
  .split,.split.flip{grid-template-columns:1fr; gap:26px}
  .split.flip .sp-media{order:0}
  .contact-grid{grid-template-columns:1fr; gap:32px}
}
@media (max-width:760px){
  .sec{padding:50px 0}
  .hero .hero-actions .btn{width:100%; text-align:center}
  .logos{gap:24px}
  .logos img{height:32px}
  .cta-full{padding:42px 0}
  .cta-full .in{flex-direction:column; align-items:flex-start}
  .cta-full .btn{width:100%; text-align:center}
  .mapwrap iframe{height:300px}
}