/* TGG v0.4.1: one visual theme for public pages AND the local workshop.
   Layout is in site.css; branch/editor structure in brand.css.
   This file owns colour, type, corners and motion. No web-font downloads. */
:root {
  --cyan: #2db4d3;
  --purple: #ae28ce;
  --lime: #36c52f;
  --ink: #2a203b;
  --muted: #665b72;
  --paper: #fdfbff;
  --soft: #f3ecfb;
  --line: #ded4e8;
  --green: #9221b1; /* compatibility token for existing component markup */
  --accent: var(--lime);
  --sans: 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --display: 'Avenir Next', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --serif: var(--display); /* existing headings now use the modern display stack */
  --action: #a520c5;
  --action-hover: #8d1aaa;
  --action-ink: #fff;
  --radius-small: 9px;
  --radius-card: 19px;
  --radius-image: 27px;
  --shadow: 0 18px 50px #58258114;
  --wing-shape: url('#brand-wing-clip');
  --brand-divider-height: 6px;
  --brand-divider: linear-gradient(90deg, var(--cyan) 0 33.333%, var(--purple) 33.333% 66.666%, var(--lime) 66.666% 100%);
}
body {
  background: radial-gradient(ellipse 65% 650px at 105% 350px, #ead4fb9c, transparent 80%),
              radial-gradient(ellipse 56% 760px at -12% 620px, #c7f1f890, transparent 78%),
              var(--paper);
  color: var(--ink);
}
.brand-defs { position: absolute; pointer-events: none; }
::selection { background: #e6a7f8; color: #2a203b; }
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -.048em; }
h1 { line-height: 1.08; font-size: clamp(42px, 5.8vw, 76px); font-weight: 700; }
h2 { line-height: 1.12; font-size: clamp(32px, 3.6vw, 48px); }
h3 { line-height: 1.15; }
em { color: #8e24b6; }
.eyebrow { color: #77349d; font-weight: 700; letter-spacing: .15em; }
a:hover { text-decoration-color: var(--purple); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 3px solid #8327b3; outline-offset: 4px; }
.preview-bar { background: #f0ddfa; color: #54226f; border-bottom: 1px solid #e2c8ef; }
.version { color: #70537e; }
.status-dot { background: var(--purple); }
.site-header { background: #fdfbfff2; }
/* Shared, full-strength colour bars at the top, beneath the hero and above
   the closing invitation. No opacity wash that makes them disappear. */
.site-header:after, .reassurance:after, .contact-strip:before {
  height: var(--brand-divider-height); opacity: 1;
  background: var(--brand-divider);
}
.brand>span { border-color: #dcccE8; color: #643778; }
#main-nav>a:not(.button) { color: #4d345e; font-weight: 600; }
#main-nav>a[aria-current]:not(.button) { color: #9120b1; text-decoration-color: var(--purple); }
.menu-toggle { border-color: #d6b1e5; background: #f5e8fd; color: #6c238e; border-radius: var(--radius-small); }

/* Consistent buttons, with branch-coloured calls to action on service pages. */
body[data-branch='maintenance'] { --action: #36c52f; --action-hover: #54d74d; --action-ink: #212736; }
body[data-branch='irrigation'] { --action: #2db4d3; --action-hover: #50c4de; --action-ink: #242239; }
.button, .nav-cta, .brand-button {
  background: var(--action); border: 1px solid transparent; color: var(--action-ink);
  border-radius: var(--radius-small); font-weight: 650; letter-spacing: .01em;
  box-shadow: 0 6px 18px #8923b51b;
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.button:hover, .nav-cta:hover, .brand-button:hover {
  background: var(--action-hover); color: var(--action-ink); transform: translateY(-2px);
  box-shadow: 0 9px 24px #8923b52a;
}
.button span { transition: transform .22s ease; }
.button:hover span { transform: translate(2px, -2px); }
.button.secondary, .small-button {
  background: #f9f1ff; color: #762492; border: 1px solid #d1a8e2;
  border-radius: var(--radius-small); box-shadow: none;
}
.button.secondary:hover, .small-button:hover { background: #f0defa; color: #67217e; }
.button.danger-button { background: #943c46; color: white; }
.button.danger-button:hover { background: #752f38; }
.text-link { color: #82319d; border-color: #cda2df; font-weight: 600; }
.text-link:hover { color: #a520c5; border-color: var(--purple); }
.tiny-circle { border-color: var(--purple); }

/* The logo's straight bands and angled wing ends, now without the kinked cuts.
   The inline SVG clip creates a continuous slope with small, smooth corners. */
.headline-wing:before, .wing-heading:before, .service-wing, .visual-wing,
.section-shape, .location-shape, .contact-wing, .colour-key span {
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  clip-path: var(--wing-shape);
  border-radius: 0;
}
.hero h1.hero-wing-title {
  font-size: clamp(41px, 4.5vw, 66px); font-weight: 700; letter-spacing: -.055em;
  line-height: 1.13; margin-bottom: 28px;
}
/* Deliberately staged wings: first left, second right, third left/centre.
   Keep the offsets in layout so reveal transforms cannot flatten the pattern. */
.hero-copy { min-width: 0; }
.hero-wing-title {
  --wing-middle-offset: clamp(52px, 7.3vw, 104px);
  --wing-bottom-offset: clamp(20px, 2.8vw, 40px);
}
.headline-wing {
  --wing-offset: 0px;
  display: block; width: fit-content;
  max-width: calc(100% - var(--wing-offset));
  padding: 10px 55px 13px 20px; margin-bottom: 15px;
  margin-left: var(--wing-offset); overflow-wrap: anywhere;
}
.headline-wing:before { background: var(--cyan); }
.headline-wing.wing-2 { --wing-offset: var(--wing-middle-offset); margin-left: var(--wing-offset); color: #fff; }
.headline-wing.wing-2:before { background: var(--purple); }
.headline-wing.wing-3 { --wing-offset: var(--wing-bottom-offset); margin-left: var(--wing-offset); color: var(--ink); }
.headline-wing.wing-3:before { background: var(--lime); }
.hero-intro { max-width: 475px; color: var(--muted); line-height: 1.85; }
.hero-visual { border-radius: var(--radius-image); box-shadow: 0 20px 50px #6427731c; }
.hero-image-card { background: #fffafeed; border: 1px solid #ffffffa6; border-radius: 17px; }
.hero-image-card p { font-weight: 650; color: #563071; font-size: 27px; }
.round-arrow { background: var(--purple); color: white; border-radius: 13px; }
.image-label, .hero-visual .image-label { border: 1px solid #decae9; background: #fffafeF2; color: #4c3459; border-radius: 7px; }
.reassurance { color: #614773; }
.reassurance a { font-weight: 600; }


/* Light, luminous section backgrounds rather than forest-green panels. */
.wing-section { background: linear-gradient(120deg, #f6e5fd, #f3efff 68%, #ecf7ff); }
.wing-heading:before { background: var(--purple); opacity: .21; height: 43%; }
.green-wing:before { background: var(--lime); opacity: .38; }
.cyan-wing:before { background: var(--cyan); opacity: .37; }
.section-shape { background: var(--purple); opacity: .11; --reveal-opacity: .11; }
.location-section { background: linear-gradient(120deg, #e4f6ff, #f4eafb 64%, #eefee8); }
.project-image, .project-detail-image img { border-radius: var(--radius-card); }
.project-copy h3 { font-size: 30px; }
.editorial-card h3 { font-size: 48px; }
.editorial-card em { font-style: normal; }
.steps article { border-color: #d8cce5; }
.steps article>span { background: #c8f0fa; border-radius: 6px; color: #472255; clip-path: none; }
.steps article:nth-child(2)>span { background: #efcef8; }
.steps article:nth-child(3)>span { background: #d5f7ca; }
.steps h3 { font-size: 24px; }

.main-service { border-radius: var(--radius-card); background: #edfbe8; border: 1px solid #d1eac9; }
.main-service:hover { background: #e5fadd; }
.main-service h3 { font-size: 35px; font-weight: 650; }
.main-service p { color: #564565; }
.main-service .card-number { color: #293225; }
.main-service .service-inclusions { opacity: 1; color: #62516a; }
.service-wing { height: 81px; opacity: 1; background: var(--lime); }
.branch-landscaping { background: #f6e9fe; border-color: #e6ceef; }
.branch-landscaping:hover { background: #f0defa; }
.branch-landscaping .service-wing { background: var(--purple); opacity: 1; }
.branch-landscaping .card-number { color: white; }
.branch-irrigation-systems { background: #e7f8fc; border-color: #c5eaf2; }
.branch-irrigation-systems:hover { background: #dcf5fb; }
.branch-irrigation-systems .service-wing { background: var(--cyan); opacity: 1; }
.main-service .card-arrow { background: #d6f5ce; color: #293225; border-radius: 9px; padding: 0 8px; }
.branch-landscaping .card-arrow { background: #e8c5f3; color: #782595; }
.branch-irrigation-systems .card-arrow { background: #b9edf7; color: #3c2851; }
.location-card, .area-card, .guide-card { border-radius: var(--radius-card); }
.location-card { border: 1px solid #d7b8e9; background: #efd8fa; }
.location-card h3 { color: #74218f; font-size: 57px; }
.location-card.clacton-card { background: #cceff7; border-color: #9fd9e9; }
.clacton-card h3 { color: #274962; }
.location-shape { background: #c236dc44; }
.clacton-card .location-shape { background: #2db4d361; }
.area-chips a, .area-chips>span { border-color: #d2bee0; border-radius: 8px; background: #fff9; color: #57376d; }
.area-chips a:hover { background: #e9d0f7; border-color: #ca85dd; }
.area-card, .guide-card { background: #f3e8fc; border-color: #decaec; }
.area-card:nth-child(2n), .guide-card:nth-child(2n) { background: #e1f5fb; border-color: #bce5ef; }
.guide-card:nth-child(3n) { background: #eafae4; border-color: #cde9c4; }
.area-card:hover, .guide-card:hover { border-color: var(--purple); box-shadow: var(--shadow); }
.guide-card h2 { font-size: 28px; }

/* Every inner page has the same accent mark, not only the three services. */
.page-intro h1, .message-page h1 { position: relative; padding-bottom: 24px; }
.page-intro h1:not(.wing-heading):after, .message-page h1:after {
  content: ''; display: block; position: absolute; bottom: 0; left: 0;
  width: 104px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--cyan) 0 32%, transparent 32% 35%, var(--purple) 35% 66%, transparent 66% 69%, var(--lime) 69%);
}
.page-intro h1.wing-heading { padding-bottom: 14px; margin-bottom: 26px; }
.page-intro .lead { max-width: 780px; }
.prose h2 { font-size: clamp(31px, 3.1vw, 42px); }
.guide-section { margin-bottom: 38px; }
.guide-section h2 { font-size: 32px; margin-bottom: 17px; }
.guide-section p { color: var(--muted); font-size: 16px; line-height: 1.9; }
.side-card, .note-box, .empty-state { background: #f2e9fb; border: 1px solid #e0cfee; border-radius: var(--radius-card); }
.side-card h2, .side-card h3, .note-box h2 { color: #653083; }
body[data-branch='maintenance'] .side-card { background: #edfae7; border-color: #cee5c4; }
body[data-branch='irrigation'] .side-card { background: #e1f7fc; border-color: #bce4ed; }
.notice { background: #ecf7fc; color: #404d65; border-left-color: var(--cyan); border-radius: 0 9px 9px 0; }
.check-list li:before { color: #9931b6; }
hr { background: var(--line); }
code { background: #eee1fa; color: #613377; border-radius: 4px; }
.reference { background: #efe0fb; color: #6b2a87; border-radius: 9px; }

/* Forms and the workshop use this palette too; readability takes priority. */
input, textarea, select, .filter-form input { border: 1px solid #cbb6db; border-radius: 8px; color: var(--ink); background: #ffffffed; }
input:focus, textarea:focus, select:focus { border-color: var(--purple); }
input[type='checkbox'] { accent-color: var(--purple); }
.job-group { border-color: #d9c6e7; border-radius: 14px; }
.job-group legend { color: #6e318e; }
.job-choice { border-color: #ded0e8; border-radius: 8px; background: #f9f4fd; color: #544361; }
.job-choice input { accent-color: var(--purple); }
.job-group[data-job-group='garden-maintenance'] .job-choice:has(input:checked) { background: #def7d4; border-color: #79bd69; }
.job-group[data-job-group='garden-maintenance'] .job-choice input { accent-color: #31892e; }
.job-group[data-job-group='irrigation-systems'] .job-choice input { accent-color: #087e9e; }
.job-tags span { background: #efe2fb; color: #663180; border-radius: 6px; }
.workshop-nav { background: #f4e8fb; border-color: #dfc6eb; border-radius: 13px; }
.workshop-nav a { border-radius: 8px; color: #603377; font-weight: 600; }
.workshop-nav a[aria-current] { background: var(--purple); color: white; }
.workshop-nav a:not([aria-current]):hover { background: #e9d2f7; }
.workshop-status { background: #e7f7fb; color: #464363; border: 1px solid #cceaf1; border-radius: 12px; }
.dashboard-card { background: #edfae7; border-radius: 16px; border-color: #d4e9cd; border-top: 5px solid var(--lime); }
.dashboard-purple { background: #f4e4fc; border-color: #e1c9ed; border-top-color: var(--purple); }
.dashboard-cyan { background: #e5f7fc; border-color: #c6e6f0; border-top-color: var(--cyan); }
.dashboard-card h2 { font-size: 31px; }
.enquiry-card { background: #fffbff; border-radius: 15px; }
.content-record { background: #fffaff; border-color: #dfcce9; }
.content-record:first-child { border-radius: 13px 13px 0 0; }
.content-record:last-child { border-radius: 0 0 13px 13px; }
.content-record:only-child { border-radius: 13px; }
.content-record h2 { font-size: 25px; }
.status-pill { color: #742394; border-color: #d5a9e8; background: #f2e3fc; }
.auth-panel { background: #f3e6fb; border-radius: 17px; }
.success-message, .success-notice { color: #374736; background: #e6f9df; border-color: #b6d9a9; border-radius: 9px; }
.revision-panel, .mail-paper { border-radius: 13px; }
.small-button { padding: 9px 13px; }
.colour-key span { padding: 10px 23px 10px 14px; }

/* The last impression belongs to the same bright brand. */
.contact-strip { color: white; background: #9323bd; }
.contact-strip .eyebrow { color: #f8e7ff; }
.contact-strip h2 { color: white; font-size: clamp(30px, 3.4vw, 44px); max-width: 760px; }
.contact-wing { background: var(--cyan); opacity: .20; right: -75px; }
.contact-strip .button-light { background: var(--lime); color: #242438; border-color: transparent; }
.contact-strip .button-light:hover { background: #5bda53; color: #242438; }
.site-footer { background: linear-gradient(115deg, #f1e2fc, #f9f2ff 47%, #e3f5fc); }
.site-footer h2 { color: #7b309c; }
.site-footer a { color: #654579; }
.site-footer .motion-toggle { background: #fff9; color: #712c93; border-color: #ccabdF; border-radius: 7px; }
.site-footer .motion-toggle:hover { background: #ead3f7; }
.footer-bottom { border-color: #d7bde7; }

/* Reveal timing is driven by JS only after a meaningful part enters the viewport.
   No delayed hiding without JS, no perpetual animation and no hidden form controls. */
.motion-ready [data-reveal] {
  opacity: 0; transform: translate3d(0, 23px, 0);
  transition: opacity .8s ease, transform .95s cubic-bezier(.19, 1, .3, 1);
}
.motion-ready [data-reveal='left'] { transform: translate3d(-34px, 0, 0); }
.motion-ready [data-reveal='right'] { transform: translate3d(34px, 0, 0); }
.motion-ready [data-reveal].is-visible { opacity: var(--reveal-opacity, 1); transform: none; }
.motion-ready .headline-wing>span { opacity: 0; transform: translateX(-12px); transition: opacity .8s ease .12s, transform .85s ease .12s; }
.motion-ready .headline-wing.is-visible>span { opacity: 1; transform: none; }
/* Focus reveals its target immediately, so a keyboard never lands on an invisible control. */
.motion-ready [data-reveal]:focus-within { opacity: 1; transform: none; transition: none; }

@media (max-width: 1150px) {
  .hero h1.hero-wing-title { font-size: clamp(36px, 4.6vw, 56px); }
  .headline-wing { padding: 9px 45px 12px 16px; }
  .main-service h3 { font-size: 30px; }
  .location-card h3 { font-size: 48px; }
  .dashboard-card h2 { font-size: 28px; }
  .guide-card h2 { font-size: 26px; }
}
@media (max-width: 980px) {
  .hero h1.hero-wing-title { font-size: clamp(32px, 4.4vw, 43px); }
  .main-service h3 { font-size: 26px; }
  .main-service .service-inclusions { font-size: 11px; }
  .hero-visual { border-radius: 23px; }
}
@media (max-width: 760px) {
  body { background: radial-gradient(ellipse 600px 600px at 130% 280px, #efddfb, transparent 75%), radial-gradient(ellipse 700px 600px at -40% 780px, #d9f4fc, transparent 75%), var(--paper); }
  h1 { font-size: clamp(38px, 9.5vw, 60px); }
  h2 { font-size: clamp(30px, 8vw, 42px); }
  .hero h1.hero-wing-title { font-size: clamp(27px, 8.6vw, 56px); line-height: 1.15; }
  .hero-wing-title {
    --wing-middle-offset: clamp(38px, 12vw, 76px);
    --wing-bottom-offset: clamp(16px, 5vw, 30px);
  }
  .headline-wing { padding: 10px 42px 12px 15px; margin-bottom: 12px; }
  .hero-visual { border-radius: 22px; height: 475px; }
  .hero-image-card { border-radius: 13px; }
  .hero-image-card p { font-size: 25px; }
  .main-service { min-height: 290px; }
  .main-service h3 { font-size: 35px; }
  .main-service p { font-size: 14px; }
  .main-service .service-inclusions { font-size: 12px; }
  .location-card h3 { font-size: 45px; }
  .location-card, .area-card, .guide-card, .side-card, .note-box { border-radius: 16px; }
  .editorial-card h3 { font-size: 41px; }
  .workshop-heading h1 { font-size: 42px; }
  .guide-section h2 { font-size: 29px; }
  .contact-strip .button { max-width: 100%; }
  .motion-ready [data-reveal='left'] { transform: translate3d(-22px, 0, 0); }
  .motion-ready [data-reveal='right'] { transform: translate3d(22px, 0, 0); }
  .motion-ready [data-reveal].is-visible { transform: none; }
}
@media (max-width: 380px) {
  .hero h1.hero-wing-title { font-size: 8.4vw; }
  .headline-wing { padding-right: 37px; padding-left: 12px; }
  .hero-image-card p { font-size: 22px; }
  .main-service h3 { font-size: 31px; }
  .workshop-heading h1 { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  [data-reveal], .motion-ready [data-reveal] { opacity: var(--reveal-opacity, 1) !important; transform: none !important; }
  .headline-wing>span, .motion-ready .headline-wing>span { opacity: 1 !important; transform: none !important; }
}
html:not(.motion-ready) [data-reveal] { opacity: var(--reveal-opacity, 1); transform: none; }
html:not(.motion-ready) .headline-wing>span { opacity: 1; transform: none; }
@media print {
  body, .site-header, .site-footer, .wing-section, .location-section { background: white !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .headline-wing>span { opacity: 1 !important; transform: none !important; }
}

/* Pause also removes hover motion, not just entrance effects. */
html.js:not(.motion-ready) { scroll-behavior: auto; }
html.js:not(.motion-ready) *, html.js:not(.motion-ready) *:before, html.js:not(.motion-ready) *:after { animation: none !important; transition: none !important; }
html.js:not(.motion-ready) .button:hover, html.js:not(.motion-ready) .main-service:hover, html.js:not(.motion-ready) .location-card:hover, html.js:not(.motion-ready) .project-image:hover img, html.js:not(.motion-ready) .button:hover span { transform: none; }

/* v0.5 location structure and workshop refinements */
.coverage-groups{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}.coverage-groups article{padding:28px;background:#fff9;border:1px solid #dfd1e8;border-radius:var(--radius-card)}.coverage-groups article:first-child{background:linear-gradient(145deg,#fff,#e8f8fc)}.coverage-groups article:last-child{background:linear-gradient(145deg,#fff,#f6eafb)}.coverage-groups h2{font-size:32px;margin:6px 0 18px}.location-projects{background:linear-gradient(120deg,#f7effc,#eefaff 58%,#f2fbea)}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-card{min-height:270px}.area-links .small{display:block;margin-top:12px}.analytics-page-card code,.analytics-table code{font-family:Consolas,'SFMono-Regular',monospace}
@media(max-width:760px){.coverage-groups{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.dashboard-card{min-height:0}}

/* v0.6 image management and reusable TGG image treatment */
.focus-center img, img.focus-center { object-position: 50% 50%; }
.focus-top img, img.focus-top { object-position: 50% 18%; }
.focus-bottom img, img.focus-bottom { object-position: 50% 82%; }
.focus-left img, img.focus-left { object-position: 20% 50%; }
.focus-right img, img.focus-right { object-position: 80% 50%; }

.page-feature { margin-top: 0; margin-bottom: 28px; }
.page-feature-frame { position: relative; aspect-ratio: 8 / 5; max-height: 620px; overflow: hidden; border-radius: var(--radius-image); box-shadow: var(--shadow); background: #eee5f4; }
.page-feature-frame>img { width: 100%; height: 100%; object-fit: cover; }
.feature-colours { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.feature-colours i { display: block; width: clamp(54px, 6vw, 94px); height: 13px; clip-path: var(--wing-shape); box-shadow: 0 4px 12px #27162d24; }
.feature-colours i:nth-child(1) { background: var(--cyan); }
.feature-colours i:nth-child(2) { background: var(--purple); }
.feature-colours i:nth-child(3) { background: var(--lime); }
.feature-tag { position: absolute; right: 24px; top: 24px; padding: 9px 12px; background: #fffaf0e8; border: 1px solid #ffffffa8; border-radius: 8px; color: #543060; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; backdrop-filter: blur(5px); }

.image-editor { border: 1px solid #d8c4e5; background: linear-gradient(145deg,#fffaff,#f1f9fc); border-radius: 17px; padding: 25px; margin: 34px 0; }
.image-editor>legend { padding: 0 10px; color: #742c94; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.image-editor-head { display: flex; justify-content: space-between; gap: 26px; align-items: end; margin-bottom: 24px; }
.image-editor-head h3 { margin: 6px 0; font-size: 29px; }
.image-editor-head p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 13px; }
.image-editor-grid { display: grid; grid-template-columns: minmax(220px,.78fr) 1.35fr; gap: 26px; align-items: start; }
.image-preview { position: relative; overflow: hidden; border-radius: 15px; min-height: 250px; background: #eee4f4; border: 1px solid #d7c6e1; }
.image-preview.landscape { aspect-ratio: 8/5; }
.image-preview.portrait { aspect-ratio: 2/3; max-height: 460px; }
.image-preview>img { width: 100%; height: 100%; object-fit: cover; }
.image-preview .feature-colours { left: 14px; bottom: 14px; gap: 5px; }
.image-preview .feature-colours i { width: 45px; height: 9px; }
input[type='file'] { padding: 9px; background: #fff; }

.media-workshop-grid { display: grid; grid-template-columns: 1.55fr .75fr; gap: 38px; align-items: start; }
.compact-head { align-items: start; }
.media-upload { padding: 22px 24px; margin-bottom: 28px; background: #e8f7fb; border: 1px solid #c8e8ef; border-radius: 14px; }
.media-upload .field { margin-bottom: 15px; }
.media-library { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.media-card { display: grid; grid-template-columns: 128px 1fr; gap: 18px; padding: 15px; border: 1px solid #e0d1e9; background: #fffaff; border-radius: 14px; min-width: 0; }
.media-thumb { aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #eee5f4; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-card h3 { font-size: 18px; letter-spacing: -.025em; margin: 5px 0 6px; overflow-wrap: anywhere; }
.media-card p:not(.eyebrow) { font-size: 11px; color: var(--muted); }
.media-card code { display: block; margin-top: 7px; font-size: 9px; }
.image-spec-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 15px; padding: 13px 0; border-bottom: 1px solid #d9c7e5; font-size: 12px; }
.image-spec-row strong { color: #56306d; }
.image-spec-row small { grid-column: 1/-1; color: var(--muted); }

@media(max-width:980px){.image-editor-grid,.media-workshop-grid{grid-template-columns:1fr}.media-library{grid-template-columns:1fr 1fr}.image-preview.portrait{max-width:390px}.page-feature-frame{max-height:520px}}
@media(max-width:760px){.page-feature{padding-inline:24px}.page-feature-frame{aspect-ratio:4/3;border-radius:18px}.feature-colours{left:16px;bottom:16px}.feature-colours i{width:48px;height:10px}.feature-tag{right:16px;top:16px}.image-editor{padding:20px 16px}.image-editor-head{align-items:flex-start;flex-direction:column}.media-library{grid-template-columns:1fr}.media-card{grid-template-columns:100px 1fr}}
.project-detail-image{position:relative;overflow:hidden;border-radius:var(--radius-card)}
.project-detail-image .feature-colours{z-index:2}

/* v0.8.3 Workshop enquiry attention state */
.workshop-nav .enquiries-nav-link{display:inline-flex;align-items:center;gap:7px}
.nav-count-pill{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e8e4ea;color:#706677;font-size:10px;font-weight:800;line-height:1;transform:translateY(-4px)}
.nav-count-pill.has-waiting{background:var(--lime);color:#173b1a;box-shadow:0 0 0 2px #fff}
.enquiry-receipt{display:inline-flex;flex-direction:column;gap:3px;margin:14px 0 22px;padding:12px 17px;border:1px solid #b8dcae;border-radius:12px;background:#edf9e9}
.enquiry-receipt span{text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:800;color:#3f7a38}
.enquiry-receipt strong{font-size:17px;letter-spacing:.035em}

/* v0.8.4 public enquiry: brand-led cards and properly aligned choice pills. */
.public-enquiry-form{display:flex;flex-direction:column;gap:20px;margin-top:0}
.public-enquiry-form .enquiry-panel{position:relative;overflow:hidden;margin:0;padding:26px 28px 8px;border:1px solid;border-radius:22px;box-shadow:0 14px 34px #52246d0a}
.public-enquiry-form .enquiry-panel:before{content:'';position:absolute;inset:0 auto 0 0;width:7px;background:currentColor}
.public-enquiry-form .enquiry-panel-cyan{color:#086f8d;background:linear-gradient(140deg,#eefbfe 0%,#fff 78%);border-color:#bde6ef}
.public-enquiry-form .enquiry-panel-purple{color:#7b2699;background:linear-gradient(140deg,#fbf1ff 0%,#fff 78%);border-color:#e1c3ee}
.public-enquiry-form .enquiry-panel-green{color:#2f7b2c;background:linear-gradient(140deg,#f1fceb 0%,#fff 78%);border-color:#c9e8be}
.public-enquiry-form .enquiry-panel .field,.public-enquiry-form .enquiry-panel .job-picker{color:var(--ink)}
.enquiry-panel-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.enquiry-panel-head .eyebrow{margin:0 0 2px;color:currentColor}
.enquiry-panel-head h2{font-size:clamp(24px,2.4vw,33px);color:var(--ink);letter-spacing:-.035em}
.enquiry-step{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;flex:0 0 42px;background:currentColor;color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em}
.public-enquiry-form .enquiry-panel input,.public-enquiry-form .enquiry-panel textarea,.public-enquiry-form .enquiry-panel select{background:#fff;border-color:#cdbfd4}
.public-enquiry-form .job-picker{margin:20px 0 10px}
.public-enquiry-form .job-picker>legend{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:24px;margin-bottom:14px}
.public-enquiry-form .job-picker>legend .muted{font-family:var(--sans);font-size:11px;letter-spacing:0;font-weight:500}
.public-enquiry-form .job-group{padding:17px 18px 18px;margin:12px 0;border:1px solid;border-radius:17px}
.public-enquiry-form .job-group[data-job-group='garden-maintenance']{background:#f1fbeD;border-color:#c9e6bf}
.public-enquiry-form .job-group[data-job-group='landscaping']{background:#fbf1ff;border-color:#dfc2eb}
.public-enquiry-form .job-group[data-job-group='irrigation-systems']{background:#effafe;border-color:#bee5ee}
.job-group-title{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.job-group-title h3{margin:0;font-size:18px;letter-spacing:-.025em}
.branch-dot{width:10px;height:10px;border-radius:50%;background:var(--purple);flex:0 0 10px}
.job-group[data-job-group='garden-maintenance'] .branch-dot{background:var(--lime)}
.job-group[data-job-group='irrigation-systems'] .branch-dot{background:var(--cyan)}
.public-enquiry-form .job-options{display:flex;flex-wrap:wrap;gap:9px}
.public-enquiry-form .job-options label{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 13px 8px 10px;border:1px solid #d6cbdc;border-radius:999px;background:#fff;line-height:1.25;font-size:12px;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;white-space:normal}
.public-enquiry-form .job-options label:hover{transform:translateY(-1px)}
.public-enquiry-form .job-options input{width:18px;height:18px;min-width:18px;margin:0;flex:0 0 18px}
.public-enquiry-form .job-options span{display:block;min-width:0;padding:0;margin:0;line-height:1.25}
.public-enquiry-form .job-group[data-job-group='garden-maintenance'] .job-options label:has(input:checked){background:#daf4d2;border-color:#6bbb5d;color:#244d24}
.public-enquiry-form .job-group[data-job-group='landscaping'] .job-options label:has(input:checked){background:#eedcf8;border-color:var(--purple);color:#612178}
.public-enquiry-form .job-group[data-job-group='irrigation-systems'] .job-options label:has(input:checked){background:#d9f2f8;border-color:var(--cyan);color:#145d70}
.public-enquiry-form .privacy-check{display:flex;align-items:flex-start;gap:12px;margin:2px 0 0;padding:17px 18px;border:1px solid #e0c9eb;border-radius:16px;background:#fbf3ff;font-size:13px;line-height:1.55;color:var(--ink)}
.public-enquiry-form .privacy-check input{width:19px;height:19px;min-width:19px;flex:0 0 19px;margin:1px 0 0;accent-color:var(--purple)}
.public-enquiry-form .privacy-check span{display:block;min-width:0}
.public-enquiry-form .human-check{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin:0;padding:18px 20px;border:1px solid #bfe5ed;border-radius:16px;background:linear-gradient(120deg,#edfafe,#fff)}
.public-enquiry-form .human-check .eyebrow{margin-bottom:3px;color:#08748f}
.public-enquiry-form .human-check .small{margin:0;max-width:460px}
.public-enquiry-form .enquiry-submit{align-self:flex-start;margin-top:2px;background:linear-gradient(90deg,var(--purple),#9024b5);border-color:transparent;box-shadow:0 11px 24px #81249c20}
.public-enquiry-form .field-hint{margin-top:-8px}
.quote-aside{padding:27px;border:1px solid #decbe8;border-radius:20px;background:linear-gradient(145deg,#fffaff,#eefafe);align-self:start}
@media(max-width:760px){.public-enquiry-form .enquiry-panel{padding:22px 18px 5px;border-radius:18px}.enquiry-step{width:38px;height:38px;flex-basis:38px}.public-enquiry-form .job-options{display:grid;grid-template-columns:1fr}.public-enquiry-form .job-options label{width:100%;border-radius:13px;min-height:44px}.public-enquiry-form .human-check{grid-template-columns:1fr;align-items:start}.public-enquiry-form .privacy-check{padding:15px}.quote-aside{padding:22px}}

/* Visible on protected staging only; the template never renders it in production. */
.staging-version-badge{position:fixed;right:14px;bottom:14px;z-index:90;display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #d7b6e5;border-radius:999px;background:#fffafdE8;color:#65277e;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 22px #4d1f6617;backdrop-filter:blur(8px)}
.staging-version-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lime)}
@media(max-width:760px){.staging-version-badge{right:9px;bottom:9px;font-size:8px;padding:6px 8px}}
@media print{.staging-version-badge{display:none!important}}

/* v0.9 media lifecycle */
.media-delete-zone{margin-top:12px;padding-top:11px;border-top:1px solid #eadfed}.media-delete-zone form{margin:0}.text-button{border:0;background:none;padding:0;font:inherit;font-size:10px;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.danger-action{color:#9f2637}.danger-action:hover{color:#6d1320}.media-in-use{background:#f2e8f7;color:#74288e}.media-delete-zone .small{margin-top:7px}