/* Landing pages (services, places, business types). Same palette and type as the home page, lighter weight. */
:root {
  --yellow: #F6D13A; --cobalt: #2043D0; --tomato: #E5533D; --paper: #FBF8F2; --ink: #16173A; --wa: #1FAF5A; --coral: #FF8A66;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--yellow) var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 18px/1.6 var(--body); }
body.as { font-family: "Noto Sans Bengali", var(--body); }
body.as h1, body.as h2, body.as summary { font-family: "Noto Sans Bengali", var(--display); text-transform: none; letter-spacing: 0; line-height: 1.15; }
a { color: inherit; }
svg { width: 1em; height: 1em; }

.pbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gutter); background: var(--ink); color: var(--paper); }
.pbrand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 900 26px/1 var(--display); letter-spacing: .04em; }
.pbrand svg { width: 34px; height: 34px; }
.pcta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--yellow); color: var(--ink); text-decoration: none; font-weight: 800; font-size: 15px; }

.phero { background: var(--yellow); padding: clamp(40px, 7vw, 100px) var(--gutter) clamp(50px, 8vw, 110px); }
.crumbs { margin: 0 0 18px; font-size: 14px; font-weight: 700; opacity: .75; }
.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
h1 { margin: 0; font: 900 clamp(3.2rem, 11vw, 9.5rem)/.86 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
h1 span { display: block; }
.h1b { color: var(--cobalt); text-shadow: .03em .03em 0 var(--ink); }
.plede { max-width: 36em; margin: clamp(20px, 3vw, 34px) 0 0; font-size: clamp(19px, 1.8vw, 24px); }
.plede strong { font-weight: 800; }
.pctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.pbtn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 800; box-shadow: 5px 5px 0 var(--tomato); transition: transform .2s, box-shadow .2s; }
.pbtn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tomato); }
.pbtn.wa { background: var(--wa); color: #fff; }
.pbtn svg { width: 22px; height: 22px; }

.pbody { max-width: 980px; margin: 0 auto; padding: clamp(40px, 6vw, 90px) var(--gutter); }
.pblock { margin-bottom: clamp(40px, 6vw, 70px); }
.pblock h2, .pfaq h2, .areas h2 { margin: 0 0 18px; font: 900 clamp(2.2rem, 5vw, 3.8rem)/.9 var(--display); text-transform: uppercase; color: var(--cobalt); }
.pblock p { max-width: 40em; }
.pblock p a { font-weight: 800; color: var(--cobalt); }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-top: 3px solid var(--ink); }
.points li { padding: 16px 0; border-bottom: 1px solid rgb(22 23 58 / .18); font-size: clamp(17px, 1.6vw, 20px); }
.points strong { font-weight: 800; margin-right: 4px; }
.pfaq details { border-bottom: 1px solid rgb(22 23 58 / .2); }
.pfaq summary { cursor: pointer; padding: 18px 0; font: 800 clamp(20px, 2.2vw, 28px)/1.15 var(--display); text-transform: uppercase; }
.pfaq summary:hover { color: var(--cobalt); }
.pfaq details p { margin: 0 0 20px; max-width: 40em; }

.areas { display: grid; gap: 34px; padding: clamp(50px, 7vw, 90px) var(--gutter); background: var(--ink); color: var(--paper); }
.areas h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--yellow); margin-bottom: 14px; }
.areas summary { cursor: pointer; font-weight: 800; color: var(--yellow); }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.links a { padding: 7px 14px; border-radius: 999px; border: 1.5px solid rgb(251 248 242 / .35); text-decoration: none; font-size: 15px; font-weight: 600; }
.links a:hover, .links a[aria-current] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.pfoot { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; padding: 22px var(--gutter) calc(24px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--paper); border-top: 1px solid rgb(251 248 242 / .2); font-size: 14px; }
.pfoot span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-right: auto; }
.pfoot svg { width: 24px; height: 24px; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }