/* Onsite Bali — bright yellow, smoky plum and warm mineral tones. */
:root {
  --yellow: #faed26;
  --plum: #46344e;
  --slate: #5a5560;
  --stone: #9d8d8f;
  --clay: #9b786f;
  --deep: #2b2233;
  --ink: #f7f3ef;
  --paper: #46344e;
  --lime: #faed26;
  --green: #faed26;
  --muted: #d7cdd1;
  --line: rgba(210,191,197,.24);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  color-scheme: dark;
}
html { scroll-padding-top: 28px; scrollbar-color: var(--stone) var(--deep); }
body { background: var(--plum); -webkit-font-smoothing: antialiased; }
::selection { color: var(--deep); background: var(--yellow); }
a:focus-visible, button:focus-visible, summary:focus-visible, video:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 5px;
}
header nav { border-color: var(--line); }
.brand { font-weight: 800; letter-spacing: .045em; }
.mark { color: var(--yellow); border-color: rgba(250,237,38,.65); }
.mark span { border-color: var(--yellow); }
.navlinks { gap: 24px; }
.navlinks > a:not(.btn) { position: relative; padding: 8px 0; }
.navlinks > a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.navlinks > a:hover::after { transform: scaleX(1); }
.btn {
  color: var(--deep); background: var(--yellow); border: 1px solid var(--yellow);
  min-height: 48px; border-radius: 2px; padding: 14px 21px;
  box-shadow: 0 0 0 rgba(250,237,38,0);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover { transform: translateY(-3px); background: #fff350; box-shadow: 0 8px 30px rgba(250,237,38,.16); }
.textlink { border-color: rgba(250,237,38,.7); transition: color .2s ease; padding-bottom: 3px; }
.textlink:hover { color: var(--yellow); }
.eyebrow, .num { color: var(--yellow); }
.hero {
  position: relative; isolation: isolate; overflow: hidden; margin: 28px auto 36px;
  padding: 54px 48px; min-height: 740px; grid-template-columns: 1.2fr .8fr; gap: 42px;
  border: 1px solid rgba(157,141,143,.4); border-radius: 8px; background: var(--deep);
}
.hero::before {
  content: ''; position: absolute; z-index: -3; inset: 0;
  background: url('/media/report-walkthrough.jpg') 72% 48% / cover no-repeat;
  filter: grayscale(1) contrast(1.16); opacity: .53; transform: scale(1.015);
}
.hero::after {
  content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 97% 10%,rgba(155,120,111,.16),transparent 60%),
    linear-gradient(90deg,rgba(43,34,51,.96),rgba(70,52,78,.76) 48%,rgba(70,52,78,.5)),
    radial-gradient(rgba(247,243,239,.18) .65px,transparent .8px);
  background-size: auto,auto,3px 3px;
}
.hero-content, .hero > .project-reel { position: relative; z-index: 1; }
.hero-route { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .45; pointer-events: none; }
.hero-route path { stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: trace-route 3s .35s ease forwards; }
.hero-route circle { filter: drop-shadow(0 0 7px rgba(250,237,38,.7)); }
.hero .eyebrow { font-size: .68rem; letter-spacing: .15em; }
.hero h1 {
  font: 700 clamp(4.4rem,7.6vw,7rem)/.91 var(--display); letter-spacing: -.015em;
  text-transform: uppercase; color: var(--yellow); margin: 24px 0 28px; max-width: 650px;
}
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero h1 span:last-child { color: var(--ink); }
.hero .lead { color: #e2d9dd; font-size: 1rem; line-height: 1.8; max-width: 490px; }
.hero-actions { gap: 18px 24px; margin-top: 30px; }
.hero-actions .diary-link { flex-basis: max-content; }
.project-reel {
  width: min(100%,320px); border: 1px solid rgba(250,237,38,.34);
  border-top: 3px solid var(--yellow); background: rgba(43,34,51,.88);
  box-shadow: 0 24px 70px rgba(18,12,24,.35); border-radius: 3px; overflow: hidden;
}
.project-reel video { background: var(--deep); }
.project-reel figcaption { padding: 19px 22px; }
.project-reel figcaption strong { color: var(--yellow); font-size: .95rem; }
.project-reel figcaption span { color: var(--muted); font-size: .78rem; }
.promise { background: var(--deep); border-block: 1px solid var(--line); padding: 32px 0; }
.metric { border-color: rgba(250,237,38,.35); }
.metric b { font: 600 2.25rem/1.15 var(--display); letter-spacing: .01em; }
.metric span { color: var(--muted); font-size: .68rem; }
section { scroll-margin-top: 24px; }
.section-head { gap: 52px; }
.section-head h2, .cta h2, .report h1, .report h2, .handover-box h3, .journal-copy h3, .about-copy h2 {
  font-family: var(--display); font-style: normal; font-weight: 600; letter-spacing: .005em;
}
.section-head h2 { text-transform: uppercase; font-size: clamp(3rem,5.1vw,4.9rem); line-height: .98; }
.section-head p, .dark .section-head p { color: var(--muted); line-height: 1.85; }
.steps { border-color: var(--line); background: rgba(43,34,51,.2); }
.step { border-color: var(--line); transition: background .3s ease; }
.step h3 { margin-top: 35px; }
.step p, .focus-item p, .about-copy p, details p, .scope-note { color: var(--muted); }
.focus-item { padding: 25px 23px 28px; background: rgba(90,85,96,.24); border-top: 2px solid var(--clay); }
.focus-item h3 { font-weight: 700; margin: 16px 0 13px; }
.focus-item .num { font-size: .66rem; letter-spacing: .05em; }
.focus-item, .journal-card, .card { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.report-list li { border-color: var(--line); }
.report-list strong { margin-bottom: 5px; }
.handover-box {
  background: var(--slate); border: 1px solid rgba(157,141,143,.5); border-top: 3px solid var(--yellow);
  box-shadow: 14px 14px 0 rgba(43,34,51,.24);
}
.handover-box h3 { font-size: 2.35rem; margin-top: 16px; }
.handover-box p { color: #e7dfe2; }
.handover-box hr { border: 0; border-top: 1px solid rgba(247,243,239,.22); margin: 30px 0; }
.plan-screen { border-color: var(--stone); box-shadow: 0 22px 60px rgba(30,21,37,.22); }
.plan-controls button { color: var(--ink); border-color: var(--stone); border-radius: 2px; transition: background .2s,color .2s; }
.plan-controls button:hover { border-color: var(--yellow); }
.plan-controls button[aria-pressed="true"] { color: var(--deep); background: var(--yellow); border-color: var(--yellow); }
.plan-controls button:focus-visible { outline-color: var(--yellow); }
.plan-controls .plan-toggle { background: var(--slate); border-color: var(--slate); }
.plan-note { color: var(--muted); }
.pill { border-color: rgba(157,141,143,.6); color: var(--muted); }
.journal-meta .pill { background: rgba(90,85,96,.45); color: #e8dfe2; }
.journal-card { background: var(--slate); border-color: rgba(157,141,143,.45); border-top: 2px solid var(--clay); }
.journal-film { background: var(--deep); background-image: radial-gradient(rgba(157,141,143,.21) .65px,transparent .8px); background-size: 4px 4px; }
.journal-film video { background: var(--deep); box-shadow: 0 20px 40px rgba(0,0,0,.24); }
.journal-film video:focus-visible { outline-color: var(--yellow); }
.journal-kicker, .journal-copy .journal-dates { color: var(--yellow); }
.journal-copy h3 { font-size: 2.45rem; line-height: 1.04; letter-spacing: 0; margin: 18px 0; }
.journal-copy p { color: #e7dfe2; }
.journal-takeaway { border-color: var(--line); }
.journal-takeaway h3 { color: var(--ink); }
.journal-takeaway p { color: var(--muted); }
.dark { background: var(--deep); border-block: 1px solid var(--line); }
.card { border: 1px solid var(--stone); background: var(--slate); padding: 38px; }
.card h3 { color: var(--yellow); }
.price { font: 600 4rem/1 var(--display); letter-spacing: .005em; }
.price small { font: 500 .875rem Manrope,sans-serif; }
.visits { opacity: 1; color: #e5dbe0; }
.card ul { border-color: rgba(247,243,239,.28); }
.card li::before { color: var(--yellow); }
.card.featured { background: var(--yellow); color: var(--deep); border-color: var(--yellow); }
.card.featured h3, .card.featured .visits { color: var(--deep); }
.card.featured ul { border-color: rgba(43,34,51,.3); }
.card.featured li::before { color: var(--deep); }
.card.featured .tag { background: var(--deep); color: var(--yellow); top: 25px; }
.quote { border-left: 3px solid var(--yellow); padding-left: 26px; color: #eee5e8; font-size: clamp(2rem,3.5vw,3.2rem); line-height: 1.2; }
.quote-credit { color: var(--yellow); }
.about-copy h2 { font-size: 2.4rem; line-height: 1.08; }
summary { gap: 25px; align-items: center; padding-right: 5px; }
summary::after { color: var(--yellow); flex-shrink: 0; }
summary::-webkit-details-marker { display: none; }
details[open] summary { color: var(--yellow); }
.cta { background: var(--yellow); color: var(--deep); position: relative; overflow: hidden; }
.cta .eyebrow { color: var(--deep); }
.cta h2 { text-transform: uppercase; font-size: clamp(3.8rem,7.7vw,7rem); letter-spacing: -.005em; max-width: 820px; }
.cta .btn { color: var(--yellow); background: var(--deep); border-color: var(--deep); }
.cta .btn:hover { box-shadow: 0 10px 30px rgba(43,34,51,.25); }
footer { background: var(--deep); border-top: 1px solid var(--line); }
.foot { color: var(--muted); }
.foot strong { color: var(--yellow); letter-spacing: .05em; }

/* The sample report uses the same palette, with neutral printing preserved. */
.report h1 { text-transform: uppercase; color: var(--yellow); font-size: clamp(3.6rem,7.3vw,6.4rem); line-height: .95; }
.report h2 { font-size: 2.6rem; line-height: 1.05; }
.report .lead { color: var(--muted); }
.notice { color: var(--ink); background: rgba(90,85,96,.65); border-left-color: var(--yellow); }
.notice strong { color: var(--yellow); }
.report-meta div { border-color: var(--stone); }
.report-meta b { color: var(--yellow); margin-bottom: 6px; }
.photo-grid figure { background: var(--slate); border-color: var(--stone); }
.photo-grid img { background: var(--deep); }
.photo-grid p { color: #eee6e9; }
.small { color: var(--muted); }
.status { color: var(--yellow); background: rgba(250,237,38,.08); border: 1px solid rgba(250,237,38,.4); }
.report a:focus-visible, .report button:focus-visible { outline-color: var(--yellow); }

/* Progressive enhancement: the page remains visible without JavaScript. */
.fx-reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.2,1); transition-delay: var(--reveal-delay,0ms); }
.reveal-ready .fx-reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }
@keyframes trace-route { to { stroke-dashoffset: 0; } }
@media (hover:hover) {
  .step:hover { background: rgba(90,85,96,.3); }
  .focus-item:hover, .journal-card:hover, .card:hover { transform: translateY(-4px); border-color: var(--yellow); box-shadow: 0 15px 35px rgba(26,18,33,.18); }
}
@media(max-width:1100px) and (min-width:821px) {
  .hero { padding: 42px 32px; gap: 28px; }
  .hero h1 { font-size: 6.1rem; }
  .navlinks { gap: 16px; font-size: .78rem; }
  .navlinks .btn { padding-inline: 14px; }
}
@media(max-width:820px) {
  .hero { grid-template-columns: 1fr; padding: 42px 36px; min-height: auto; gap: 40px; }
  .hero::after { background: linear-gradient(180deg,rgba(43,34,51,.93),rgba(70,52,78,.72)),radial-gradient(rgba(247,243,239,.12) .65px,transparent .8px); background-size: auto,3px 3px; }
  .hero h1 { font-size: clamp(4.5rem,12.4vw,7.5rem); }
  .hero .lead { max-width: 600px; }
  .hero > .project-reel { width: min(100%,330px); }
  .hero-route { opacity: .22; }
  .section-head { gap: 22px; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); }
  .quote { font-size: 2.5rem; }
  .card { padding: 32px; }
}
@media(max-width:480px) {
  .brand { font-size: .86rem; gap: 9px; }
  .mark { width: 32px; height: 32px; }
  .navlinks .btn { padding: 10px 13px; min-height: 42px; font-size: .73rem; }
  .hero { margin-top: 16px; padding: 34px 23px; border-radius: 5px; gap: 34px; }
  .hero .eyebrow { font-size: .6rem; letter-spacing: .1em; }
  .hero h1 { font-size: clamp(3.9rem,16.5vw,5.5rem); margin: 24px 0; }
  .hero .lead { font-size: .94rem; line-height: 1.75; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-actions .textlink { font-size: .82rem; }
  .project-reel figcaption { padding: 18px; }
  .promise .wrap { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 14px; }
  .metric { padding-left: 13px; }
  .metric b { font-size: 1.85rem; }
  .metric span { display: block; font-size: .58rem; line-height: 1.6; }
  .section-head h2 { font-size: 3.4rem; }
  .focus-item { padding: 25px 22px; }
  .handover-box { padding: 26px; box-shadow: 7px 7px 0 rgba(43,34,51,.24); }
  .journal-copy h3 { font-size: 2.25rem; }
  .journal-kicker { font-size: .62rem; letter-spacing: .05em; }
  .card { padding: 28px 25px; }
  .card h3 { margin-bottom: 36px; }
  .card.featured .tag { top: 23px; right: 20px; font-size: .6rem; }
  .price { font-size: 3.8rem; }
  .quote { font-size: 2rem; padding-left: 21px; }
  .report h1 { font-size: 3.8rem; }
  .report .toolbar { align-items: flex-start; flex-direction: column; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-route path { stroke-dashoffset: 0; }
  .reveal-ready .fx-reveal:not(.is-visible) { opacity: 1; transform: none; }
}
@media print {
  :root { color-scheme: light; --ink:#211b24; --paper:#fff; --muted:#514b55; --line:#ccc; }
  body { background: #fff !important; color: #211b24 !important; }
  .report h1, .report h2, .report-meta b, .notice strong { color: #211b24 !important; }
  .notice, .photo-grid figure { background: #fff !important; color: #211b24 !important; box-shadow: none; }
  .photo-grid p, .small, .report .lead { color: #514b55 !important; }
  .status { color: #211b24; background: #eee; border-color: #aaa; }
  .fx-reveal, .reveal-ready .fx-reveal:not(.is-visible) { opacity: 1; transform: none; }
}