/* Layout and components. Edit brand colors in assets/theme.css. */

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
}

a {
  color:inherit;
  text-underline-offset:4px;
}

p {
  margin:0 0 1.15rem;
}

h1,h2,h3 {
  line-height:1.12;
  letter-spacing:-.035em;
  margin:0 0 1rem;
}

h1 {
  font-size:clamp(2.8rem,5.3vw,4.9rem);
  max-width:900px;
}

h2 {
  font-size:clamp(1.9rem,3vw,2.7rem);
}

h3 {
  font-size:1.35rem;
}

h1 span {
  color:var(--primary);
}

.container {
  width:min(1160px,calc(100% - 64px));
  margin-inline:auto;
}

.site-header {
  border-bottom:1px solid var(--line);
  background:#fff;
}

.header-inner {
  display:flex;
  gap:36px;
  align-items:center;
  justify-content:space-between;
  min-height:106px;
}

.brand {
  display:inline-flex;
  flex-direction:column;
  text-decoration:none;
  line-height:1.08;
  flex-shrink:0;
}

.brand-name {
  font-size:1.75rem;
  letter-spacing:-.06em;
  font-weight:900;
}

.brand-dot {
  color:var(--primary);
}

.brand-sub {
  font-size:.78rem;
  letter-spacing:.25em;
  font-weight:700;
  margin-top:6px;
}

nav {
  display:flex;
  align-items:center;
  gap:32px;
}

nav a {
  text-decoration:none;
  font-weight:600;
}

nav a:hover,nav a[aria-current] {
  text-decoration:underline;
  text-decoration-color:var(--primary);
  text-decoration-thickness:3px;
}

.header-call {
  font-weight:700;
  text-decoration:none;
  border:1px solid var(--ink);
  border-radius:100px;
  padding:10px 18px;
}

.dropdown {
  position:relative;
}

.dropdown summary {
  cursor:pointer;
  font-weight:600;
}

.dropdown-links {
  position:absolute;
  z-index:10;
  top:40px;
  left:-20px;
  width:220px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 14px 35px rgba(24,35,49,.12);
  border-radius:12px;
  padding:12px;
}

.dropdown-links a {
  display:block;
  padding:9px 10px;
  font-size:.95rem;
}

.hero {
  padding-block:78px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:65px;
  align-items:center;
}

.eyebrow {
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.6;
  margin-bottom:20px;
}

.lead {
  font-size:1.18rem;
  line-height:1.7;
  color:var(--muted);
  max-width:660px;
}

.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:28px 0 18px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border:1px solid var(--ink);
  border-radius:8px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  line-height:1.45;
  text-align:center;
}

.button:hover {
  background:#234964;
}

.button.secondary {
  background:transparent;
  color:var(--ink);
}

.button.secondary:hover {
  background:var(--soft);
}

.fine {
  font-size:.875rem;
  color:var(--muted);
}

.hero-panel {
  background:var(--ink);
  color:#fff;
  padding:38px;
  border-radius:var(--radius);
  border-top:6px solid var(--accent);
}

.hero-panel>.eyebrow {
  color:var(--accent);
}

.hero-panel h2 {
  font-size:2.1rem;
}

.panel-row {
  display:flex;
  gap:20px;
  border-top:1px solid #ffffff30;
  padding:22px 0;
}

.panel-row>span {
  color:var(--accent);
  font-size:.875rem;
  font-family:monospace;
}

.panel-row h3 {
  font-size:1.1rem;
  margin-bottom:7px;
  letter-spacing:0;
}

.panel-row p {
  font-size:.95rem;
  color:#ccdbe5;
  margin:0;
}

.text-link {
  font-weight:700;
}

.hero-panel .text-link {
  color:var(--accent);
}

.trust {
  background:var(--soft);
  border-block:1px solid var(--line);
}

.trust-inner {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:20px;
  font-size:.95rem;
  font-weight:700;
}

.section {
  padding-block:76px;
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:34px;
}

.card {
  border:1px solid var(--line);
  padding:30px;
  border-radius:var(--radius);
  background:#fff;
}

.number {
  font-family:monospace;
  font-size:.8rem;
  font-weight:700;
  color:var(--primary);
  letter-spacing:.08em;
  margin-bottom:28px;
}

.card p:not(.number) {
  color:var(--muted);
}

.card a {
  font-weight:700;
}

.cards .card {
  display:flex;
  flex-direction:column;
}

.cards .card>a {
  margin-top:auto;
  padding-top:10px;
}

.split {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:80px;
  border-top:1px solid var(--line);
}

.closing {
  background:var(--ink);
  color:#fff;
}

.closing-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding-block:54px;
}

.closing .eyebrow {
  color:var(--accent);
}

.closing .button {
  background:var(--accent);
  color:var(--ink);
  white-space:nowrap;
}

.closing h2 {
  margin:0;
}

.page-intro {
  padding-block:72px 45px;
}

.page-intro h1 {
  font-size:clamp(2.8rem,5vw,4.5rem);
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  padding-bottom:64px;
}

.service-grid h2 {
  font-size:1.6rem;
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:24px;
  padding-bottom:64px;
}

.contact-card {
  border-radius:var(--radius);
  padding:36px;
  background:var(--soft);
}

.contact-card h2 {
  font-size:clamp(1.35rem,2.2vw,2rem);
}

.email {
  overflow-wrap:anywhere;
}

.contact-card .fine {
  margin-top:16px;
}

footer {
  background:#f1f6f9;
  padding-top:50px;
}

.footer-grid {
  display:grid;
  grid-template-columns:1.3fr 1.3fr .7fr;
  gap:40px;
  padding-bottom:40px;
}

.footer-grid h2 {
  font-size:1rem;
  letter-spacing:0;
  margin-bottom:16px;
}

.footer-grid>div>a:not(.brand) {
  display:block;
  font-size:.92rem;
  margin-bottom:8px;
  overflow-wrap:anywhere;
}

.footer-brand p {
  font-size:.875rem;
  max-width:250px;
  margin-top:20px;
  color:var(--muted);
}

.copyright {
  font-size:.8rem;
  border-top:1px solid var(--line);
  padding-block:20px;
  color:var(--muted);
}

.skip-link {
  position:absolute;
  left:16px;
  top:-100px;
  background:var(--ink);
  color:white;
  padding:14px;
  z-index:50;
}

.skip-link:focus {
  top:10px;
}

:focus-visible {
  outline:3px solid var(--primary);
  outline-offset:5px;
}

summary::marker {
  color:var(--primary);
}

@media(max-width:900px) {
  .header-inner {
    gap:18px;
  }
  .header-call {
    display:none;
  }
  .hero {
    gap:32px;
    grid-template-columns:1.2fr 1fr;
  }
  .hero-panel {
    padding:26px;
  }
  .hero h1 {
    font-size:3.4rem;
  }
  .cards {
    gap:14px;
  }
  .card {
    padding:24px;
  }
  .split {
    gap:40px;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
  }
  .footer-grid>div:last-child {
    grid-column:1/-1;
  }
  .footer-grid>div:last-child>a {
    display:inline-block;
    margin-right:18px;
  }
  .contact-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:650px) {
  .container {
    width:calc(100% - 36px);
  }
  .header-inner {
    flex-wrap:wrap;
    gap:18px;
    padding-block:20px;
    min-height:0;
  }
  .brand-name {
    font-size:1.5rem;
  }
  .brand-sub {
    font-size:.7rem;
  }
  nav {
    gap:20px;
    width:100%;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:15px;
  }
  .dropdown-links {
    left:auto;
    right:-60px;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:44px;
    gap:30px;
  }
  .hero h1 {
    font-size:clamp(2.45rem,10vw,3.6rem);
  }
  .hero-panel {
    padding:28px;
  }
  .trust-inner {
    flex-direction:column;
    gap:8px;
    padding-block:20px;
  }
  .trust-inner span::before {
    content:"✓";
    color:var(--primary);
    margin-right:10px;
  }
  .section {
    padding-block:46px;
  }
  .cards,.service-grid,.split,.footer-grid {
    grid-template-columns:1fr;
  }
  .split {
    gap:20px;
  }
  .cards {
    gap:18px;
  }
  .closing-inner {
    align-items:flex-start;
    flex-direction:column;
    padding-block:40px;
    gap:24px;
  }
  .page-intro {
    padding-top:44px;
  }
  .page-intro h1 {
    font-size:2.8rem;
  }
  .service-grid {
    padding-bottom:40px;
  }
  .footer-grid {
    gap:28px;
  }
  .contact-card {
    padding:25px;
  }
  .contact-grid {
    padding-bottom:40px;
  }
  .actions .button {
    flex-grow:1;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}

/* Original supplied logo: clip only its empty canvas; do not alter the image. */
.brand {
  position:relative;
  width:270px;
  height:90px;
  overflow:hidden;
  display:block;
}

.brand img {
  position:absolute;
  width:300px;
  height:300px;
  max-width:none;
  left:-15px;
  top:-102px;
}

.enquiry-layout {
  display:grid;
  grid-template-columns:.8fr 1.5fr;
  gap:40px;
  align-items:start;
  padding-bottom:72px;
}

.contact-sidebar {
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius);
  padding:34px;
  border-top:5px solid var(--accent);
}

.contact-sidebar .eyebrow {
  color:var(--accent);
}

.contact-sidebar>p {
  color:#d4e3ec;
}

.contact-sidebar h2 {
  font-size:2rem;
}

.contact-detail {
  border-top:1px solid #ffffff30;
  padding:22px 0 0;
  margin-top:22px;
}

.contact-detail h3 {
  font-size:.9rem;
  letter-spacing:0;
  color:var(--accent);
  margin-bottom:8px;
}

.contact-detail a {
  overflow-wrap:anywhere;
  font-size:1rem;
}

.contact-detail p {
  color:#d4e3ec;
}

.contact-sidebar .fine {
  margin-top:26px;
  color:#d4e3ec;
}

.form-card {
  border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(24,35,49,.04);
  border-radius:var(--radius);
  padding:38px;
  background:white;
}

.form-card .eyebrow {
  color:var(--primary);
  margin-bottom:12px;
}

.form-card h2 {
  font-size:2rem;
}

.form-intro {
  color:var(--muted);
  margin-bottom:30px;
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.field {
  margin-bottom:22px;
  min-width:0;
}

.field label {
  display:block;
  font-size:.93rem;
  font-weight:700;
  margin-bottom:8px;
}

.field input,.field select,.field textarea {
  display:block;
  width:100%;
  min-width:0;
  border:1px solid #a9bac6;
  border-radius:7px;
  padding:13px 14px;
  background:#fcfdfe;
  color:var(--ink);
  font:inherit;
  font-size:1rem;
  line-height:1.5;
}

.field select {
  padding-right:28px;
}

.field textarea {
  resize:vertical;
  min-height:160px;
}

.field input::placeholder,.field textarea::placeholder {
  color:#607481;
  opacity:1;
}

.field input:focus,.field select:focus,.field textarea:focus {
  border-color:var(--primary);
  background:white;
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.optional {
  font-weight:400;
  font-size:.8rem;
  color:var(--muted);
}

.field-hint {
  font-size:.8rem;
  line-height:1.6;
  color:var(--muted);
  margin:9px 0 0;
}

.form-disclosure {
  font-size:.85rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:22px;
}

.submit-button {
  cursor:pointer;
  width:100%;
  gap:18px;
  font:inherit;
  font-weight:700;
  padding:16px;
}

@media(max-width:1000px) {
  .enquiry-layout {
    grid-template-columns:1fr 1.6fr;
    gap:24px;
  }
  .form-card {
    padding:26px;
  }
  .contact-sidebar {
    padding:24px;
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0;
  }
}

@media(max-width:750px) {
  .enquiry-layout {
    grid-template-columns:1fr;
    gap:24px;
  }
  .form-card {
    grid-row:1;
  }
  .contact-sidebar {
    grid-row:2;
  }
  .header-inner {
    flex-wrap:wrap;
  }
  .header-call {
    display:none;
  }
}

@media(max-width:650px) {
  .brand {
    width:250px;
    height:82px;
  }
  .brand img {
    left:-25px;
    top:-106px;
  }
  .header-inner {
    padding-block:8px 18px;
  }
  .enquiry-layout {
    padding-bottom:44px;
  }
  .form-card h2 {
    font-size:1.7rem;
  }
}

/* Shared presentation rules for the Signature Blue theme. */
body {
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 {
  font-weight:700;
  letter-spacing:-.035em;
}

h1 {
  line-height:1.1;
}

h2 {
  line-height:1.18;
}

.site-header {
  border-top:4px solid var(--primary);
  box-shadow:0 3px 18px rgba(23,46,76,.04);
}

.header-inner {
  min-height:108px;
}

nav {
  font-size:.95rem;
}

nav a,summary {
  transition:color .18s ease;
}

nav a:hover,nav a[aria-current],summary:hover {
  color:var(--primary);
}

.header-call {
  color:var(--primary);
  border-color:var(--line);
  border-radius:9px;
  background:var(--soft);
  padding:11px 19px;
}

.header-call:hover {
  border-color:var(--primary);
}

.dropdown-links {
  border-radius:12px;
  padding:8px;
  box-shadow:var(--shadow-hover);
}

.dropdown-links a {
  border-radius:7px;
}

.dropdown-links a:hover {
  background:var(--soft);
}

.hero {
  padding-block:88px;
  gap:64px;
}

.hero h1 {
  font-weight:750;
  letter-spacing:-.045em;
}

.eyebrow {
  font-size:.8rem;
  letter-spacing:.13em;
  color:var(--primary);
}

.hero>.eyebrow {
  color:var(--primary);
}

.hero .lead {
  margin-top:24px;
  max-width:560px;
}

.button {
  background:var(--primary);
  border-color:var(--primary);
  border-radius:9px;
  box-shadow:0 5px 14px rgba(0,87,181,.14);
  transition:background .18s,box-shadow .18s;
}

.button:hover {
  background:var(--primary-hover);
  border-color:var(--primary-hover);
  box-shadow:0 7px 20px rgba(0,87,181,.2);
}

.button.secondary {
  color:var(--primary);
  background:#fff;
  border-color:#b9cfe6;
  box-shadow:none;
}

.button.secondary:hover {
  color:var(--primary-hover);
  background:var(--soft);
  border-color:var(--primary);
}

.hero-panel {
  background:linear-gradient(145deg,#263646,#182531);
  border-top:4px solid var(--primary);
  box-shadow:var(--shadow-hover);
  padding:38px;
}

.hero-panel h2 {
  font-weight:650;
}

.hero-panel .eyebrow,.closing .eyebrow {
  color:var(--accent);
}

.panel-row {
  padding-block:24px;
}

.panel-row>span {
  font-family:var(--font-body);
  font-weight:700;
}

.hero-panel .text-link:hover {
  color:#fff;
}

.trust {
  background:var(--soft);
  border-color:#e5edf5;
}

.trust-inner {
  font-weight:600;
  padding-block:22px;
}

.section {
  padding-block:82px;
}

.card {
  box-shadow:var(--shadow);
  padding:34px;
  border-color:#e1e8f0;
  transition:box-shadow .2s,border-color .2s;
}

.card:hover {
  box-shadow:var(--shadow-hover);
  border-color:#adc9e8;
}

.card h3 {
  font-size:1.45rem;
}

.number {
  font-family:var(--font-body);
  letter-spacing:.1em;
  font-size:.8rem;
}

.card a,.split .text-link {
  color:var(--primary);
}

.card a:hover,.split .text-link:hover {
  color:var(--primary-hover);
}

.closing {
  background:linear-gradient(120deg,#242d37,#142e48);
  border-top:4px solid var(--primary);
}

.closing-inner {
  padding-block:62px;
}

.closing .button {
  background:#fff;
  color:var(--primary);
  border-color:white;
}

.closing .button:hover {
  background:#eaf4ff;
}

.page-intro {
  padding-block:72px 48px;
}

.page-intro .lead {
  margin-top:22px;
}

.contact-sidebar {
  background:linear-gradient(145deg,#263646,#182531);
  border-top-color:var(--primary);
  box-shadow:var(--shadow);
}

.form-card {
  box-shadow:var(--shadow);
  padding:40px;
}

.field input,.field select,.field textarea {
  border-color:#becbd8;
  border-radius:8px;
  background:#fbfcfe;
}

.field input:focus,.field select:focus,.field textarea:focus {
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-color:var(--primary);
}

.form-disclosure a,.field-hint a {
  color:var(--primary);
}

footer {
  background:var(--soft);
  border-top:1px solid var(--line);
  padding-top:48px;
}

.footer-grid {
  gap:44px;
}

.footer-grid h2 {
  font-size:.9rem;
}

.footer-grid a:not(.brand):hover {
  color:var(--primary);
}

:focus-visible {
  outline:3px solid var(--primary);
  outline-offset:4px;
}

.hero-panel :focus-visible,.contact-sidebar :focus-visible,.closing :focus-visible {
  outline-color:var(--accent);
}

@media(max-width:900px) {
  .hero {
    gap:32px;
    padding-block:60px;
  }
  .hero-panel {
    padding:28px;
  }
  .card {
    padding:26px;
  }
  .form-card {
    padding:28px;
  }
}

@media(max-width:650px) {
  .header-inner {
    min-height:0;
  }
  .hero {
    padding-block:44px;
    gap:32px;
  }
  .section {
    padding-block:48px;
  }
  .hero-panel {
    padding:28px;
  }
  .closing-inner {
    padding-block:42px;
  }
  .page-intro {
    padding-block:42px 30px;
  }
  .form-card {
    padding:24px;
  }
  .footer-grid {
    gap:28px;
  }
  .trust-inner {
    padding-block:20px;
  }
  .button {
    padding:14px 20px;
  }
  .lead {
    font-size:1.1rem;
  }
  .enquiry-layout {
    gap:24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* About the business: supplied workshop illustration beside owner introduction. */
.about-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  border-top:1px solid var(--line);
}

.about-photo {
  margin:0;
  min-width:0;
}

.about-photo img {
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.about-photo figcaption {
  font-size:.8rem;
  color:var(--muted);
  margin-top:12px;
}

.about-copy .lead {
  font-size:1.15rem;
}

.about-copy .button {
  margin-top:8px;
}

@media(max-width:900px) {
  .about-section {
    gap:32px;
  }
}

@media(max-width:750px) {
  .about-section {
    grid-template-columns:1fr;
    gap:26px;
  }
}

/* Three clear benefits, presented as matching brand cards. */
.benefits {
  background:var(--soft);
  border-block:1px solid var(--line);
  padding-block:32px;
}

.benefit-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.benefit-card {
  display:flex;
  align-items:flex-start;
  gap:17px;
  background:#fff;
  padding:28px 24px;
  border:1px solid var(--line);
  border-top:3px solid var(--primary);
  border-radius:12px;
  box-shadow:var(--shadow);
}

.benefit-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  flex-shrink:0;
  border-radius:12px;
  background:#eaf3ff;
  color:var(--primary);
}

.benefit-card h2 {
  font-size:1.12rem;
  line-height:1.35;
  letter-spacing:-.02em;
  margin:2px 0 9px;
}

.benefit-card p {
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
  margin:0;
}

.about-section {
  border-top:0;
}

#services {
  border-top:1px solid var(--line);
}

@media(max-width:1000px) {
  .benefit-card {
    flex-direction:column;
    padding:24px;
    gap:15px;
  }
}

@media(max-width:750px) {
  .benefit-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .benefit-card {
    flex-direction:row;
    padding:24px;
    gap:18px;
  }
  .benefits {
    padding-block:24px;
  }
}

/* Mobile navigation and quick contact: shared across every page. */
.mobile-menu-toggle,.mobile-quick-actions {
  display:none;
}

#service-form {
  scroll-margin-top:24px;
}

@media(max-width:760px) {
  body {
    padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));
  }
  .header-inner {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    padding-block:10px;
    min-height:0;
  }
  .header-inner .brand {
    width:204px;
    height:72px;
  }
  .header-inner .brand img {
    width:240px;
    height:240px;
    left:-17px;
    top:-81px;
  }
  .header-call {
    display:none;
  }
  .mobile-menu-toggle:not([hidden]) {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:64px;
    min-height:48px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--soft);
    color:var(--ink);
    font:inherit;
    font-size:.9rem;
    font-weight:700;
    cursor:pointer;
    padding:8px;
  }
  .mobile-menu-toggle[aria-expanded="true"] {
    background:var(--primary);
    border-color:var(--primary);
    color:white;
  }
  #site-navigation {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:12px 0;
    border-top:1px solid var(--line);
    font-size:1rem;
  }
  .has-mobile-nav #site-navigation {
    display:none;
  }
  .has-mobile-nav #site-navigation.is-open {
    display:flex;
  }
  #site-navigation>a,#site-navigation summary {
    min-height:48px;
    padding:12px 14px;
    border-radius:8px;
  }
  #site-navigation>a:hover,#site-navigation>a[aria-current="page"],#site-navigation summary:hover {
    background:var(--soft);
  }
  #site-navigation .dropdown {
    width:100%;
  }
  #site-navigation .dropdown-links {
    position:static;
    width:auto;
    margin:0 0 8px 16px;
    padding:4px 8px;
    border:0;
    border-left:3px solid var(--primary);
    border-radius:0;
    box-shadow:none;
  }
  #site-navigation .dropdown-links a {
    display:flex;
    align-items:center;
    min-height:48px;
    font-size:1rem;
    padding:10px 14px;
  }
  .mobile-quick-actions {
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:10px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:30;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 -3px 18px rgba(23,46,76,.08);
    padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  }
  .mobile-quick-actions a {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:48px;
    padding:10px 12px;
    border:1px solid var(--primary);
    border-radius:8px;
    color:var(--primary);
    font-weight:700;
    font-size:.95rem;
    text-decoration:none;
    line-height:1.3;
  }
  .mobile-quick-actions .quick-call {
    background:var(--primary);
    color:#fff;
  }
  .button {
    min-height:48px;
  }
  .field input,.field select,.field textarea {
    font-size:16px;
    min-height:48px;
  }
  .footer-grid>div>a:not(.brand) {
    padding-block:9px;
    min-height:44px;
  }
  .contact-detail a {
    display:inline-block;
    padding-block:8px;
  }
  .hero,.split,.about-section,.enquiry-layout,.service-grid,.cards {
    grid-template-columns:1fr;
  }
  .hero {
    gap:32px;
    padding-block:40px;
  }
  .hero h1,.page-intro h1 {
    font-size:clamp(2.2rem,8.6vw,3.6rem);
    overflow-wrap:break-word;
  }
  .about-section {
    gap:28px;
  }
  .about-photo img {
    max-width:100%;
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0;
  }
  .form-card {
    min-width:0;
    grid-row:1;
  }
  .contact-sidebar {
    min-width:0;
    grid-row:2;
  }
  .closing-inner {
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
  .closing .button {
    white-space:normal;
  }
}

@media(max-width:380px) {
  .container {
    width:calc(100% - 28px);
  }
  .hero-panel,.form-card,.card,.contact-sidebar {
    padding:22px;
  }
  .benefit-card {
    padding:20px;
    gap:12px;
  }
  .benefit-icon {
    width:44px;
    height:44px;
  }
  .footer-grid {
    grid-template-columns:1fr;
  }
}

/* Quiet service details below the contact form, without a separate page section. */
.booking-note {
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:16px;
  font-size:.875rem;
  line-height:1.6;
  color:var(--muted);
}

.booking-note p {
  margin:0 0 6px;
}

.booking-note strong {
  font-weight:600;
  color:var(--ink);
  margin-right:6px;
}

/* Compact payment methods at the end of the contact sidebar. */
.sidebar-payments {
  border-top:1px solid #ffffff30;
  margin-top:24px;
  padding-top:22px;
}

.sidebar-payments h3 {
  font-size:1rem;
  font-weight:600;
  letter-spacing:0;
  color:var(--accent);
  margin:0 0 18px;
  line-height:1.4;
}

.payment-icons {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  list-style:none;
  padding:0;
  margin:0;
}

.payment-icons li {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:.78rem;
  color:#fff;
  line-height:1.35;
  text-align:center;
}

.payment-symbol {
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1px solid #ffffff30;
  background:#ffffff0d;
  border-radius:10px;
  color:var(--accent);
}

.sidebar-payments .no-checks {
  font-size:.875rem;
  color:#d4e3ec;
  margin:16px 0 0;
}

.sidebar-payments .payment-availability {
  font-size:.8rem;
  line-height:1.6;
  color:#d4e3ec;
  margin:10px 0 0;
}

/* Navigation: logo stays on its original edge while links sit beside the action. */
.header-inner {
  justify-content:flex-start;
}

#site-navigation {
  margin-left:auto;
  gap:30px;
}

.header-call {
  margin-left:24px;
  white-space:nowrap;
}

.dropdown-links {
  width:240px;
}

.dropdown summary[aria-current="page"] {
  color:var(--primary);
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:5px;
}

/* About page */
.about-feature {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:54px;
  align-items:center;
  padding-bottom:65px;
}

.about-feature img {
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow-hover);
}

.about-feature .lead {
  margin-bottom:18px;
}

/* Published price lists: readable on phones as well as desktop. */
.pricing-intro {
  padding-bottom:32px;
}

.pricing-list {
  padding-bottom:58px;
}

.price-card {
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 32px;
  align-items:start;
  padding:25px 28px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
  margin-bottom:15px;
}

.price-card h2 {
  font-size:1.4rem;
  margin:0 0 9px;
}

.price-card p {
  color:var(--muted);
  margin:0;
}

.price-amount {
  font-size:1.55rem;
  font-weight:800;
  color:var(--primary);
  line-height:1.2;
  white-space:nowrap;
}

.price-amount small {
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--muted);
  text-align:right;
  margin-top:5px;
}

.pricing-note {
  border-left:4px solid var(--primary);
  background:var(--soft);
  border-radius:8px;
  padding:22px 25px;
  margin:8px 0 34px;
}

.pricing-note p {
  margin:0;
}

.pricing-hub {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  padding-bottom:64px;
}

.pricing-hub .card {
  display:flex;
  flex-direction:column;
}

.pricing-hub .card a {
  margin-top:auto;
}

.pricing-hub .price-amount {
  margin:8px 0 14px;
}

/* Distinct custom build showcase */
.build-hero {
  background:radial-gradient(circle at 75% 20%,#164f85,#152b42 47%,#17232f 100%);
  color:white;
  overflow:hidden;
}

.build-hero-inner {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:32px;
  align-items:center;
  min-height:480px;
  padding-block:68px;
}

.build-hero .eyebrow {
  color:#90ceff;
}

.build-hero h1 {
  font-size:clamp(3rem,5.5vw,5.2rem);
  margin-bottom:24px;
}

.build-hero h1 span {
  color:#76c7ff;
}

.build-hero .lead {
  color:#d5e5f2;
}

.build-hero .button {
  background:#fff;
  color:var(--primary);
  border-color:#fff;
}

.build-hero .button:hover {
  background:#e8f4ff;
}

.build-hero .button.secondary {
  background:transparent;
  color:#fff;
  border-color:#ffffff8c;
}

.build-art {
  max-width:385px;
  width:100%;
  margin:auto;
  filter:drop-shadow(0 25px 40px #0007);
}

.build-art svg {
  display:block;
  width:100%;
  height:auto;
}

.build-types {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:30px;
}

.build-types article {
  padding:28px;
  border-radius:13px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.build-types .number {
  margin-bottom:15px;
}

.build-types h3 {
  font-size:1.4rem;
}

.build-steps {
  background:var(--soft);
  border-block:1px solid var(--line);
}

.build-steps-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:32px;
}

.build-step {
  border-top:3px solid var(--primary);
  padding-top:19px;
}

.build-step strong {
  display:block;
  color:var(--primary);
  font-size:.82rem;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.build-step h3 {
  font-size:1.24rem;
}

.build-callout {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-radius:14px;
  background:#e9f4ff;
  padding:28px 32px;
  margin-bottom:62px;
}

.build-callout p {
  margin:0;
}

.build-callout .button {
  flex:none;
}

@media(max-width:1000px) {
  #site-navigation {
    gap:18px;
  }
  .header-call {
    margin-left:10px;
  }
  .build-steps-grid {
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:760px) {
  #site-navigation {
    margin-left:0;
    gap:4px;
  }
  .header-call {
    display:none;
  }
  .about-feature,.build-hero-inner {
    grid-template-columns:1fr;
  }
  .build-hero-inner {
    padding-block:45px;
  }
  .build-art {
    max-width:290px;
  }
  .build-types,.pricing-hub {
    grid-template-columns:1fr;
  }
  .build-callout {
    display:block;
  }
  .build-callout .button {
    margin-top:17px;
  }
  .dropdown-links {
    width:auto;
  }
  .price-card {
    padding:22px;
  }
  .header-inner {
    justify-content:space-between;
  }
}

@media(max-width:420px) {
  .price-card {
    grid-template-columns:1fr;
    gap:10px;
  }
  .price-amount small {
    text-align:left;
  }
}

/* Service detail pages and homepage service overview */
.home-services {
  border-top:1px solid var(--line);
}

.section-heading {
  text-align:center;
  max-width:750px;
  margin:0 auto 30px;
}

.section-heading .lead {
  margin:0 auto;
}

.section-heading .eyebrow {
  margin-bottom:12px;
}

.home-service-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.home-service-card {
  display:flex;
  align-items:center;
  flex-direction:column;
  text-align:center;
  border:1px solid var(--line);
  border-top:3px solid var(--primary);
  border-radius:13px;
  padding:34px 27px;
  background:var(--soft);
  box-shadow:var(--shadow);
}

.home-service-icon {
  height:75px;
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}

.home-service-card h3 {
  font-size:1.42rem;
  margin-bottom:12px;
}

.home-service-card p {
  color:var(--muted);
  margin-bottom:22px;
}

.home-service-card a {
  margin-top:auto;
  font-weight:700;
  color:var(--primary);
}

.home-service-card:hover {
  box-shadow:var(--shadow-hover);
  border-color:#a9c9e8;
  border-top-color:var(--primary);
}

.service-section-lead {
  margin:0 0 26px;
}

.service-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.service-feature {
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:12px;
  padding:27px;
}

.service-feature-number {
  display:block;
  color:var(--primary);
  font-size:.81rem;
  font-weight:800;
  letter-spacing:.1em;
  margin-bottom:20px;
}

.service-feature h3 {
  font-size:1.25rem;
  margin-bottom:10px;
}

.service-feature p {
  color:var(--muted);
  margin:0;
}

.service-hero .build-art {
  max-width:430px;
}

#about {
  scroll-margin-top:22px;
}

@media(max-width:950px) {
  .service-feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px) {
  .home-service-grid,.service-feature-grid {
    grid-template-columns:1fr;
  }
  .home-service-card {
    padding:27px 22px;
  }
}

/* Apple services device lineup */
.apple-art {
  max-width:480px!important;
  aspect-ratio:1.55;
  overflow:hidden;
}

.apple-art img {
  display:block;
  width:125%;
  height:auto;
  max-width:none;
  transform:translate(-10%,-11%);
}