@import url('/experience-v2.css');
@import url('/brand.css');
.intro{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:5px 30px;padding:16px 4% 14px;text-align:left}.intro .eyebrow{grid-column:1;grid-row:1;margin:0;font-size:7px;letter-spacing:.23em;opacity:.65}.intro h1{grid-column:1;grid-row:2;font-size:clamp(26px,3.1vw,43px);line-height:1.16;margin:0}.intro h1 em{font-size:.4em;margin:0 .6em}.intro .countdown{grid-column:2;grid-row:1/3;margin:0;gap:10px}.countdown .clock,.countdown svg{width:54px;height:54px}.countdown .clock b{width:54px;height:54px;font-size:21px}.countdown .clock span{font-size:6px;letter-spacing:.1em;margin-top:2px}.compact-toolbar{display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:0 22px;padding:9px 4%;min-height:56px}.compact-toolbar .live-progress{min-width:0;max-width:390px;grid-template-columns:minmax(0,1fr) 45px;gap:3px 9px}.live-progress>strong{font-size:23px}.live-progress>span{font-size:10px}.live-progress>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px;line-height:11px}.live-track{height:3px}.toolbar-mini{display:flex;align-items:center;gap:8px}.toolbar-mini button{font:300 9px Ranade,sans-serif;min-height:30px;padding:7px 10px;border:1px solid #92c28f;border-radius:3px 6px 3px 5px;white-space:nowrap}.toolbar-mini #controls-toggle{background:#e9f5f3;border-color:#78cdd2}#controls-panel{grid-column:1/3;padding-top:9px}#controls-panel .instructions{grid-template-columns:auto 1fr minmax(200px,30%);padding:12px 15px;border:1px solid #c8e0c7;margin-bottom:12px}#controls-panel .instructions strong{font-size:18px}#controls-panel .instructions p{font-size:10px}#controls-panel .paint-actions{justify-content:flex-end;padding:0 0 5px}#controls-panel .brush-size{display:flex;gap:12px;align-items:center;width:230px;margin-right:auto}#controls-panel .brush-size>span{display:flex;gap:15px;white-space:nowrap}#controls-panel .brush-size input{flex:1;width:100px}.paint-actions .help-detail{font-size:9px;color:#2f4341;opacity:.7;max-width:260px;line-height:1.6;margin-left:8px}.art{min-width:0}.world{margin:0}.progress-heading{margin-bottom:16px}.progress-heading p{font-size:17px}footer{padding:20px 4% 32px;background:#fffde9;border-color:#c8e0c7}#progress-dock{position:fixed;left:0;bottom:0;right:0;width:100%;height:11px;z-index:40;border:0;border-top:1px solid #92c28f;background:#f1f6dd;padding:0;border-radius:0;cursor:pointer}#dock-segments{display:grid;grid-template-columns:repeat(6,1fr);height:100%;gap:1px}#dock-segments>span{height:100%;background:#f1f6dd;position:relative}#dock-segments i{display:block;height:100%;background:#499a45;transition:width .25s}#dock-label{position:absolute;right:15px;bottom:15px;opacity:0;font:300 9px Ranade,sans-serif;padding:6px 9px;background:#fffde9;border:1px solid #c8e0c7;pointer-events:none;transition:opacity .2s}#progress-dock:hover #dock-label,#progress-dock:focus-visible #dock-label{opacity:1}
@media(min-width:1600px){.intro h1{font-size:43px}}@media(max-width:850px){.intro{gap:3px 18px;padding:13px 4% 12px}.intro h1{font-size:27px}.intro .countdown{gap:6px}.countdown .clock,.countdown svg{width:44px;height:44px}.countdown .clock b{width:44px;height:44px;font-size:18px}.countdown .clock span{font-size:5px}.toolbar-mini{gap:5px}.toolbar-mini button{font-size:8px;padding:7px 8px}.compact-toolbar{gap:0 12px;padding:8px 4%}.live-progress>small{font-size:7px}#controls-panel .instructions{grid-template-columns:auto 1fr}#controls-panel .instructions #next-opening{grid-column:2;border:0;padding:0}.paint-actions .help-detail{display:none}}
@media(max-width:600px){.intro{grid-template-columns:1fr auto;gap:4px 10px;padding:12px 4%}.intro .eyebrow{font-size:5px;letter-spacing:.14em}.intro h1{font-size:21px;max-width:230px;line-height:1.15}.intro h1 em{font-size:.45em;margin:0 .4em}.intro .countdown{gap:2px}.countdown .clock,.countdown svg{width:31px;height:31px}.countdown .clock b{width:31px;height:31px;font-size:13px}.countdown .clock span{font-size:4px;letter-spacing:0;margin-top:0}.compact-toolbar{grid-template-columns:1fr auto;gap:0 8px;padding:8px 4%;min-height:48px}.compact-toolbar .live-progress{grid-template-columns:minmax(0,1fr) 34px;min-width:0;max-width:none;gap:2px 5px}.live-progress>span{font-size:8px}.live-progress>strong{font-size:19px}.live-progress>small{display:none}.toolbar-mini{gap:4px}.toolbar-mini button{font-size:7px;min-height:27px;padding:5px 6px}.toolbar-mini #reset{font-size:0;width:26px;padding:0}.toolbar-mini #reset::before{content:'↺';font-size:15px}.toolbar-mini #reset::after{content:''}.toolbar-mini #controls-toggle{max-width:84px}.compact-toolbar #controls-panel{padding-top:10px}#controls-panel .instructions{padding:10px;gap:8px}#controls-panel .instructions strong{font-size:16px}#controls-panel .instructions p{font-size:9px}.instruction-pencil{font-size:25px}#controls-panel .paint-actions{display:flex;gap:10px;flex-wrap:wrap}#controls-panel .brush-size{width:100%;font-size:10px;gap:15px}#controls-panel .brush-size input{min-width:100px}.paint-actions button{flex:initial;width:100%}#progress-dock{height:9px}.world{display:block;overflow:visible}.art{width:100%;min-width:0;order:initial}footer{padding:20px 4% 28px}}
body{position:relative;isolation:isolate}body::before,body::after{content:'';position:fixed;pointer-events:none;z-index:-1;background-repeat:no-repeat;background-size:contain}body::before{left:-110px;bottom:-160px;width:390px;height:790px;background-image:url('/art/botanical-margin.svg');opacity:.045}body::after{right:-100px;top:70px;width:350px;height:600px;background-image:url('/art/floral-margin.svg');opacity:.04}main{position:relative;z-index:1}.intro{background:transparent}.art{background:#fff;isolation:isolate}footer{background:#fffde9ed}@media(max-width:700px){body::before{width:240px;left:-150px;opacity:.035}body::after{width:210px;right:-130px;opacity:.03}}

.pencil-ring path{fill:none;stroke:#2f4341;stroke-linecap:round;stroke-linejoin:round}.pencil-base{opacity:.7}.pencil-progress{opacity:.95}

#first-paint-hint{position:absolute;top:3.5%;left:50%;transform:translateX(-50%);width:90%;text-align:center;pointer-events:none;z-index:3;font:400 clamp(18px,2.1vw,31px)/1.3 'Stencil Marcellus',Marcellus,serif;color:#f6905a;transition:opacity .5s,transform .5s}#first-paint-hint span{display:block;font:300 10px/1.7 Ranade,sans-serif;margin-top:5px;color:#2f4341;opacity:.65}#first-paint-hint.faded{opacity:0;transform:translate(-50%,-8px)}@media(max-width:600px){#first-paint-hint{font-size:16px;top:2%;line-height:1.25}#first-paint-hint span{font-size:8px;margin-top:2px}}

#areas.journey-progress button::after,#areas.journey-progress .segment-fill{display:none}#areas.journey-progress{border-bottom:0;border-radius:4px 4px 0 0}#progress-slot{position:relative;height:11px;border:1px solid #c8e0c7;border-top:0;border-radius:0 0 3px 3px}#progress-dock.in-footer{position:absolute;top:0;bottom:auto;left:0;right:0;width:100%;height:100%;border-top:0;border-radius:0 0 3px 3px;overflow:hidden}#progress-dock.in-footer #dock-label{display:none}@media(max-width:600px){#progress-slot{height:9px}}

/* Keep the brush cursor without the distracting footprint box. */
#brush{border:0!important;background:none!important;box-shadow:none!important;outline:0!important}

/* Botanical brand language stays behind the header/footer, outside the artwork. */
.intro,footer{isolation:isolate;position:relative;overflow:hidden}.intro::before,footer::before,footer::after{content:'';position:absolute;pointer-events:none;z-index:-1;background:url('/art/brand-fern.svg') center/contain no-repeat;opacity:.13}.intro::before{width:440px;height:235px;right:16%;top:-110px;transform:rotate(15deg)}footer::before{width:450px;height:290px;left:-180px;bottom:-90px;transform:rotate(25deg);opacity:.15}footer::after{width:390px;height:260px;right:-135px;top:-50px;transform:rotate(190deg);opacity:.12}
#controls-panel .instructions{display:flex;gap:8px;align-items:baseline;padding:2px 0 7px;border:0;margin:0;background:none}#controls-panel .instruction-pencil{font-size:16px}#controls-panel .instructions strong{font:400 10px Ranade,sans-serif}#controls-panel .instructions p{font:300 10px/1.5 Ranade,sans-serif;margin:2px 0}#controls-panel .instructions>div{display:flex;gap:7px;flex-wrap:wrap}#controls-panel .instructions #next-opening{margin-left:auto;padding:0;border:0;max-width:290px;font-size:9px}#controls-panel .paint-actions{padding-top:5px}
.art,#scene,#hotspots{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}.art.touch-painting{cursor:crosshair}#building-fill-label{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,-115%);padding:3px 7px;background:#fffde9dc;border-radius:2px;color:#2f4341;font:400 clamp(8px,1vw,13px)/1.35 Ranade,sans-serif;white-space:nowrap;box-shadow:0 1px 0 #f6905a55}#first-paint-hint>span:first-child{font:inherit;color:inherit;opacity:1;margin:0}#first-paint-hint>span+span{font:300 10px/1.7 Ranade,sans-serif;opacity:.65;margin-top:5px}
@media(max-width:600px){#controls-panel .instructions{display:block}#controls-panel .instruction-pencil,#controls-panel .instructions strong{display:none}#controls-panel .instructions #next-opening{max-width:none;margin:3px 0}#first-paint-hint>span+span{font-size:8px}.intro::before{right:-100px;width:300px;opacity:.12}footer::before{width:300px;left:-160px}footer::after{width:280px;right:-160px}}

/* Painted lettering follows the front facade rather than a floating label. */
#building-fill-label{width:9.5%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#f6905a;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(8px,1.5vw,22px);line-height:1.05;white-space:normal;text-align:center;text-transform:none;transform:translate(-50%,-55%) rotate(-13deg) skewX(-5deg);transform-origin:center;-webkit-text-stroke:.2px #f6905a;text-shadow:0 .5px 0 #fffde966}

/* Wheel/trackpad scrolling stays native. Only touch-capable input suppresses panning on the painting surface. */
.art,#scene,#hotspots{touch-action:auto;overscroll-behavior:auto}
@media(any-pointer:coarse){.art,#scene,#hotspots{touch-action:none}}
.art.touch-input,.art.touch-input #scene,.art.touch-input #hotspots{touch-action:none}

/* Exact client motifs extracted from Brand Book p39; main brand palette. */
body::before,body::after{display:none}.intro{background:#78cdd2}.intro h1,.intro .eyebrow,.intro h1 em{color:#2f4341}.intro::before{background-image:url('/art/client-bird-p39.png');background-size:100% auto;width:180px;height:320px;right:29%;top:-75px;transform:rotate(7deg);opacity:.32}.compact-toolbar{background:#e9f5f3;border-color:#78cdd2}footer{background:#499a45;border-color:#499a45}footer .section-label,footer .progress-heading p,footer .progress-heading>strong,footer .progress-heading>strong small,footer .footer-bottom,footer .footer-bottom p,footer .footer-bottom #enquire{color:#fffde9}footer::before,footer::after{background-image:url('/art/client-fern-p39.png');background-size:100% auto;opacity:.32}footer::before{width:230px;height:410px;left:-70px;bottom:-85px;transform:rotate(30deg)}footer::after{width:210px;height:375px;right:-30px;top:-140px;transform:rotate(205deg)}#areas.journey-progress{background:#fffde9}#progress-slot{border-color:#c8e0c7}footer .footer-bottom #enquire{text-decoration:underline;text-decoration-color:#f6905a;text-underline-offset:4px}
@media(max-width:600px){.intro::before{width:120px;height:220px;right:31%;top:-45px;opacity:.27}footer::before{left:-110px;width:220px}footer::after{right:-105px;width:200px}}

.pencil-ring .charcoal-body{fill:#2f4341;stroke:none}.pencil-ring .charcoal-hair{fill:none;stroke:#2f4341;stroke-width:.6;opacity:.5}.pencil-base{opacity:.37}.pencil-progress{opacity:1}

.pencil-base{opacity:.65}.pencil-progress{opacity:1}

/* Kumquat campaign controls and a more generous countdown baseline. */
.intro{padding-bottom:25px}.intro .countdown{padding-bottom:6px}.compact-toolbar{background:#f6905a;border-color:#f6905a;padding-top:12px;padding-bottom:12px}.toolbar-mini button{background:#fffde9}.toolbar-mini #controls-toggle{background:#fffde9;border-color:#2f434144}#progress-dock,#dock-segments>span{background:#fee9da}#dock-segments i{background:#f6905a}#progress-dock{border-top-color:#f6905a}
@media(max-width:850px){.intro{padding-bottom:22px}}@media(max-width:600px){.intro{padding-bottom:19px}.intro .countdown{padding-bottom:4px}.compact-toolbar{padding-top:10px;padding-bottom:10px}}

/* Solid adjoining colour bands; white type on Kumquat. */
.intro{margin-bottom:0;border-bottom:0}.compact-toolbar{margin-top:-1px;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:#f6905a}.compact-toolbar .live-progress>span,.compact-toolbar .live-progress>strong,.compact-toolbar .live-progress>small,#controls-panel .instructions strong,#controls-panel .instructions p,#controls-panel .instructions #next-opening,#controls-panel .instruction-pencil,#controls-panel .brush-size,#controls-panel .help-detail{color:#fff}.compact-toolbar .live-track{background:#ffffff55}.compact-toolbar .live-track>span{background:#fff}.compact-toolbar .live-progress>small{opacity:1}#controls-panel .instructions p,#controls-panel .help-detail{opacity:1}#building-fill-label{transform-origin:0 0;transform:none;will-change:transform}

/* One compact status row preserves space for the illustration. */
.compact-toolbar{padding:3px 4%;min-height:32px;gap:0 15px}.compact-toolbar .live-progress{display:grid;grid-template-columns:minmax(80px,110px) minmax(55px,110px) 35px minmax(80px,1fr);align-items:center;max-width:none;gap:8px;min-width:0}.compact-toolbar .live-progress>span,.compact-toolbar .live-track,.compact-toolbar .live-progress>strong,.compact-toolbar .live-progress>small{grid-column:auto;grid-row:1;margin:0}.compact-toolbar .live-progress>span{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-toolbar .live-progress>strong{font-size:17px;line-height:24px}.compact-toolbar .live-progress>small{font-size:8px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-toolbar .live-track{height:3px}.toolbar-mini button{min-height:24px;font-size:8px;padding:4px 8px}.compact-toolbar #controls-panel{padding-top:7px;padding-bottom:4px}
@media(max-width:800px){.compact-toolbar{gap:0 9px;padding:3px 3%}.compact-toolbar .live-progress{grid-template-columns:minmax(65px,100px) minmax(30px,65px) 29px;gap:5px}.compact-toolbar .live-progress>small{display:none}.compact-toolbar .live-progress>span{font-size:8px}.compact-toolbar .live-progress>strong{font-size:16px}.toolbar-mini button{font-size:7px;padding:4px 6px;min-height:23px}}
@media(max-width:480px){.compact-toolbar .live-progress{grid-template-columns:minmax(50px,1fr) 33px 26px;gap:4px}.compact-toolbar .live-progress>span{font-size:7px}.compact-toolbar .live-progress>strong{font-size:14px}.toolbar-mini{gap:4px}.toolbar-mini #reset{width:23px;min-height:23px}.toolbar-mini #reset::before{font-size:13px}}

@media(min-width:801px){.compact-toolbar .live-progress{grid-template-columns:minmax(80px,110px) minmax(55px,110px) 45px minmax(80px,1fr);gap:10px}.compact-toolbar .live-progress>small{font-size:9px}}

@media(max-width:800px){.compact-toolbar .live-progress{grid-template-columns:minmax(65px,100px) minmax(30px,65px) 36px}}@media(max-width:480px){.compact-toolbar .live-progress{grid-template-columns:minmax(50px,1fr) 30px 35px;gap:5px}}

#building-fill-label{z-index:1;color:var(--building-label-ink,#f6905a);-webkit-text-stroke-color:var(--building-label-ink,#f6905a);transform-origin:0 0}.building-tip{z-index:5}#hotspots{z-index:2}

/* A quieter brand label remains readable against the detailed facade. */
#building-fill-label{font-family:Ranade,Arial,sans-serif;font-weight:400;font-size:clamp(7px,1vw,14px);line-height:1.3;padding:4px 6px;color:#fff;background:var(--building-label-ink,#f6905a);border-radius:3px;-webkit-text-stroke:0;text-shadow:none;box-shadow:0 1px 3px #2f434118}
@media(max-width:600px){#building-fill-label{padding:2px 3px;border-radius:2px;font-size:clamp(6px,1.6vw,9px)}}

/* Fill the available browser width, keeping the illustration's aspect ratio. */
main {
  width: 100%;
  max-width: none;
  margin: 0;
}
@media (max-width: 480px) {
  #areas.journey-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #areas.journey-progress .area-title { padding-right: 24px; }
}
@media (max-width: 380px) {
  .intro { gap: 4px 7px; }
  .intro h1 { font-size: 18px; }
  .intro .countdown { gap: 1px; }
  .countdown .clock, .countdown svg, .countdown .clock b { width: 27px; height: 27px; }
  .countdown .clock b { font-size: 12px; }
}