@font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-VariableFont_wght.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Boldonse'; src: url('/fonts/Boldonse-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { --bg: #faf8f3; --surface: #fff; --tint: #f0ede5; --text: #242321; --muted: #605d57; --border: #cdc8bd; --control: #7e796e; --orange: #ff4c17; --link: #a62e0b; color-scheme: light; }
* { box-sizing: border-box; }
/* Avoid accidental double-tap zoom while keeping pinch zoom available. */
html { touch-action: manipulation; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 'Space Grotesk', sans-serif; -webkit-font-smoothing: antialiased; }
h1,h2,h3,p { margin-top: 0; } h1,h2,h3 { line-height: 1.2; letter-spacing: -.04em; font-weight: 500; }
h1 { font-size: clamp(2.5rem,5vw,4.2rem); margin-bottom: 30px; } h2 { font-size: 2rem; margin-bottom: 22px; } h3 { font-size: 1.4rem; }
p { margin-bottom: 22px; } a { color: var(--link); text-underline-offset: 5px; overflow-wrap: anywhere; } a:hover { text-decoration-thickness: 2px; }
button,input,textarea,select { font: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid var(--link); outline-offset: 5px; } [hidden] { display: none !important; }
.container { width: min(1160px,calc(100% - 64px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; top: 8px; left: 16px; transform: translateY(-150%); z-index: 10; background: var(--bg); padding: 12px; } .skip-link:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--border); }
.header-row { display: flex; align-items: center; gap: 35px; min-height: 94px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; } .brand .horizontal-logo { display: block; width: 170px; height: auto; background: transparent; }
.desktop-nav { margin-left: auto; display: flex; gap: 28px; }
.desktop-nav a,.header-phone { color: var(--text); font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.desktop-nav a:hover,.header-phone:hover { text-decoration: underline; }
.menu-trigger { margin-left: auto; background: transparent; border: 0; padding: 10px 0 10px 16px; color: var(--text); min-height: 44px; font-size: 15px; }
.mobile-nav { display: flex; flex-direction: column; padding-bottom: 18px; max-height: calc(100dvh - 76px); overflow-y: auto; }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.location,.eyebrow { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.lead { font-size: 22px; line-height: 1.55; color: var(--muted); max-width: 45ch; }
.actions { display: flex; flex-wrap: wrap; gap: 15px 28px; align-items: center; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; background: var(--orange); border: 1px solid var(--orange); color: #242321; font-weight: 600; font-size: 15px; line-height: 1.4; text-decoration: none; padding: 13px 24px; }
.button:hover { background: #ff693e; } .button.secondary { color: var(--text); background: transparent; border-color: var(--border); }
.global-hero { padding: 70px 0 75px; }
.global-hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }
.global-hero h1 { font-family: 'Boldonse',sans-serif; font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.7; margin-bottom: 26px; }
.global-hero h1 span { color: var(--link); }
.global-lead { max-width: 36ch; color: var(--muted); font-size: 18px; }
.hero-work-link { display: inline-flex; min-height: 44px; align-items: center; gap: 14px; color: var(--text); font-size: 15px; }
.hero-project { margin: 0; min-width: 0; } .hero-project a { display: block; } .hero-project img { display: block; width: 100%; height: auto; }
.hero-project figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); padding-top: 14px; }
.selected-work { padding: 32px 0 65px; border-top: 1px solid var(--border); }
.work-strip-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.work-strip-heading h2 { margin: 0; } .work-strip-heading > a { min-height: 44px; display: flex; align-items: center; gap: 14px; font-size: 14px; }
.work-tile { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; text-decoration: none; color: var(--text); }
.work-tile-image { overflow: hidden; } .work-tile-image img { display: block; width: 100%; height: auto; transition: transform .4s; } .work-tile:hover img { transform: scale(1.02); }
.work-tile-caption p { max-width: 28ch; font-size: 22px; line-height: 1.5; } .work-tile-caption > span { color: var(--link); font-size: 15px; }
.global-services { padding: 35px 0 70px; border-top: 1px solid var(--border); }
.global-services-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-bottom: 24px; } .global-services-heading p { color: var(--muted); max-width: 37ch; }
.service-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; }
.service-shortcuts a { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 15px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 20px; }
.service-shortcuts a span { color: var(--link); } .service-shortcuts a:hover { color: var(--link); }
.midhurst-section { padding: 60px 0; background: var(--tint); scroll-margin-top: 24px; }
.midhurst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.midhurst-section h2 { font: 400 clamp(2.5rem,4vw,3.5rem)/1.12 Georgia,serif; letter-spacing: -.045em; }
.midhurst-section p { max-width: 36ch; color: var(--muted); } .midhurst-section .actions { font-size: 15px; }
.midhurst-project { margin: 0; min-width: 0; } .midhurst-project a,.midhurst-project img { display: block; width: 100%; height: auto; }
.midhurst-project figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 14px; } .midhurst-project figcaption span { color: var(--muted); }
.global-contact { padding: 60px 0; } .big-contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); padding-bottom: 24px; color: var(--text); text-decoration: none; font-size: clamp(2.4rem,5vw,4rem); letter-spacing: -.05em; } .big-contact span { color: var(--link); }
.global-contact-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 18px; } .global-contact-links a { min-height: 44px; display: flex; align-items: center; font-size: 16px; }
.services-section,.work-section,.contact-section { padding: 60px 0 70px; }
.services-layout,.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.services-intro > p,.contact-grid > div > p { max-width: 37ch; color: var(--muted); }
.working-note { margin-top: 44px; max-width: 35ch; } .working-note h2 { font-size: 1.4rem; } .working-note p { font-size: 16px; color: var(--muted); } .working-note a { display: inline-flex; align-items: center; min-height: 44px; }
.service-row { border-top: 1px solid var(--border); padding: 10px 0 24px; } .service-row:last-child { border-bottom: 1px solid var(--border); }
.service-row h2 { margin: 0; font-size: 23px; } .service-row h2 a { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 55px; color: var(--text); text-decoration: none; } .service-row h2 a:hover { color: var(--link); } .service-row h2 span { color: var(--link); }
.service-row p { color: var(--muted); font-size: 16px; margin: 0; max-width: 40ch; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-bottom: 40px; } .section-heading-row h1 { margin: 0; } .section-heading-row p { max-width: 30ch; color: var(--muted); margin: 0; }
.project-feature { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; } .project-image { display: block; min-width: 0; } .project-image img { width: 100%; height: auto; display: block; }
.project-copy h2 { font: 400 2.4rem/1.15 Georgia,serif; letter-spacing: -.035em; } .project-copy p { font-size: 16px; } .project-copy .project-credit { color: var(--muted); font-size: 14px; } .project-copy a { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; font-size: 15px; }
.project-sequence { display: grid; gap: 75px; margin-top: 75px; }
.more-work { border-block: 1px solid var(--border); margin-top: 50px; } .more-work summary { cursor: pointer; min-height: 56px; padding: 15px 0; }
.more-work dl { margin: 0 0 20px; } .more-work dl > div { display: grid; grid-template-columns: 1fr 2fr; gap: 25px; padding: 8px 0; } .more-work dt a { display: inline-flex; align-items: center; min-height: 44px; } .more-work dd { margin: 0; padding-top: 8px; font-size: 15px; color: var(--muted); }
.testimonials-section { padding: 0 0 60px; } .testimonials-section > .container { border-top: 1px solid var(--border); padding-top: 35px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 75px; }
.testimonials-heading p { color: var(--muted); font-size: 15px; } .testimonials-heading a { display: inline-flex; align-items: center; min-height: 44px; }
.testimonials { display: grid; gap: 28px; } .quote { margin: 0; padding-bottom: 25px; border-bottom: 1px solid var(--border); } .quote blockquote { margin: 0; } .quote blockquote p { font: 400 1.3rem/1.6 Georgia,serif; } .quote figcaption { color: var(--muted); font-size: 14px; } .quote figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
.page-next { padding: 0 0 60px; } .home-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.prose { max-width: 800px; padding: 45px 0 70px; } .prose h2 { font-size: 1.7rem; margin-top: 35px; } .prose li { margin-bottom: 12px; } .prose .back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; margin-bottom: 22px; }
.prose .location { margin-bottom: 14px; } .prose ul { padding-left: 22px; } .note { border-left: 2px solid var(--orange); padding-left: 20px; color: var(--muted); font-size: 15px; margin-top: 28px; }
.trading-note { border-top: 1px solid var(--border); padding-top: 25px; margin-top: 35px; color: var(--muted); font-size: 14px; } .small,.updated { font-size: 14px; color: var(--muted); }
.contact-details { display: flex; flex-direction: column; gap: 4px; margin: 25px 0 15px; } .contact-details a { display: flex; align-items: center; min-height: 44px; font-size: 19px; }
form { min-width: 0; } form > p:first-child { font-size: 14px; color: var(--muted); } .form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; } label { font-size: 15px; }
input,textarea { width: 100%; min-width: 0; background: var(--surface); color: var(--text); border: 1px solid var(--control); border-radius: 0; padding: 12px; min-height: 48px; } textarea { resize: vertical; } input[aria-invalid='true'],textarea[aria-invalid='true'] { border: 2px solid var(--link); } .field-error { font-size: 14px; color: var(--link); } .field-error:empty { display: none; }
#form-status:not(:empty) { border-left: 2px solid var(--orange); padding: 16px; margin-top: 20px; } #contact-alternative { margin-top: 20px; } button:disabled { opacity: .7; cursor: wait; }
.site-footer { border-top: 1px solid var(--border); padding: 25px 0 10px; }
.footer-top,.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px 35px; } .footer-top { padding-bottom: 22px; } .footer-identity .brand .horizontal-logo { width: 140px; } .footer-identity p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px 25px; } .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--text); text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 8px; } .footer-bottom p { font-size: 12px; color: var(--muted); margin: 0; } .footer-bottom nav { display: flex; gap: 22px; } .footer-bottom nav a { min-height: 44px; display: flex; align-items: center; font-size: 13px; color: var(--muted); }
.footer-bottom nav { flex-wrap: wrap; }
.cookie-settings { background: transparent; border: 0; padding: 0; min-height: 44px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 5px; }
.analytics-consent { position: fixed; bottom: 0; inset-inline: 0; z-index: 110; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 30px #0002; padding: 22px max(24px, calc((100vw - 1160px) / 2)); display: flex; align-items: center; gap: 24px; max-height: 80dvh; overflow-y: auto; }
.analytics-consent h2 { font: 600 18px/1.4 'Space Grotesk', sans-serif; letter-spacing: 0; margin: 0 0 8px; }
.analytics-consent p { font-size: 14px; margin: 0; max-width: 62ch; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.consent-close { background: transparent; color: var(--muted); border: 0; min-height: 44px; padding: 8px; font-size: 14px; }
@media (max-width: 900px) { .analytics-consent { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 24px max(20px, env(safe-area-inset-bottom)); } .consent-actions { flex-shrink: 1; } }
.logo-intro { display: none; } .intro-pending { overflow: hidden; }
.intro-pending body > .site-header,.intro-pending body > main,.intro-pending body > .site-footer,.intro-pending body > .skip-link { visibility: hidden; }
.intro-pending.intro-revealing body > .site-header,.intro-pending.intro-revealing body > main,.intro-pending.intro-revealing body > .site-footer { visibility: visible; }
.intro-pending .logo-intro { display: grid; position: fixed; inset: 0; z-index: 100; place-items: center; background: var(--bg); }
.intro-identity { width: min(520px,calc(100% - 72px)); } .intro-identity img { display: block; width: 100%; height: auto; animation: intro-logo-appear .7s ease-out both; }
.intro-skip { position: absolute; bottom: max(28px,env(safe-area-inset-bottom)); right: 28px; background: transparent; color: var(--muted); border: 0; padding: 12px; min-height: 44px; font-size: 12px; } .intro-skip span { margin-left: 16px; }
@keyframes intro-logo-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1050px) { .header-row { gap: 20px; } .desktop-nav { gap: 20px; } .header-phone { font-size: 12px; } .brand .horizontal-logo { width: 150px; } .global-hero-grid,.midhurst-grid,.services-layout,.contact-grid { gap: 40px; } .global-hero h1 { font-size: 1.9rem; } .project-feature { gap: 35px; } }
@media (max-width: 900px) { .desktop-nav,.header-phone { display: none; } .header-row { min-height: 76px; } .footer-contact { flex-direction: column; gap: 0; } }
@media (max-width: 700px) {
 .container { width: calc(100% - 40px); } .global-hero { padding: 35px 0 40px; } .global-hero-grid,.midhurst-grid,.services-layout,.contact-grid,.global-services-heading,.project-feature,.testimonials-section > .container,.home-next-grid { grid-template-columns: 1fr; gap: 28px; }
 .global-hero h1 { font-size: clamp(1.6rem,6.7vw,2.4rem); } .global-lead { font-size: 17px; } .hero-project { margin-top: 6px; } .brand .horizontal-logo { width: 140px; }
 .work-strip-heading { gap: 16px; margin-bottom: 20px; } .work-strip-heading h2 { font-size: 1.6rem; } .work-strip-heading > a { font-size: 12px; gap: 8px; }
 .work-tile { grid-template-columns: 1fr; gap: 22px; } .work-tile-caption p { font-size: 19px; max-width: 35ch; margin-bottom: 12px; } .selected-work { padding: 25px 0 35px; }
 .global-services { padding: 28px 0 40px; } .global-services-heading { gap: 0; margin-bottom: 10px; } .service-shortcuts { grid-template-columns: 1fr; } .service-shortcuts a { min-height: 56px; font-size: 18px; }
 .midhurst-section { padding: 35px 0; } .midhurst-section h2 { font-size: 3rem; } .global-contact { padding: 35px 0; }
 .services-section,.work-section,.contact-section { padding: 35px 0 45px; } h1 { font-size: 2.7rem; } h2 { font-size: 1.8rem; } .working-note { margin-top: 25px; }
 .section-heading-row { display: block; padding-bottom: 28px; } .section-heading-row h1 { margin-bottom: 20px; } .section-heading-row p { max-width: 36ch; }
 .project-copy h2 { font-size: 2rem; } .project-sequence { gap: 45px; margin-top: 45px; } .project-copy p { margin-bottom: 12px; } .more-work { margin-top: 35px; } .more-work dl > div { grid-template-columns: 1fr; gap: 0; }
 .testimonials-section { padding-bottom: 40px; } .testimonials-section > .container { gap: 20px; } .quote blockquote p { font-size: 1.15rem; }
 .prose { padding: 25px 0 45px; } .prose .lead { font-size: 20px; } .prose h2 { font-size: 1.5rem; } .page-next { padding-bottom: 40px; }
 .footer-top,.footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-bottom nav { flex-wrap: wrap; } .footer-contact { gap: 0; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .intro-pending .logo-intro { display: none; } .intro-pending { overflow: auto; } .intro-pending body > .site-header,.intro-pending body > main,.intro-pending body > .site-footer,.intro-pending body > .skip-link { visibility: visible; } }

/* An editorial hierarchy: services read as information, projects get the space. */
:root { --bg: #f8f6f0; --surface: #fffdf8; --tint: #ebe7de; --text: #292824; --muted: #5f5b54; --border: #c9c4b9; --control: #80796c; --orange: #ef3b00; --link: #a8310e; }
[data-theme='dark'] { --bg: #1c1d1b; --surface: #242522; --tint: #282925; --text: #f0ede5; --muted: #bab7ad; --border: #505149; --control: #848679; --link: #ff966f; color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #1c1d1b; --surface: #242522; --tint: #282925; --text: #f0ede5; --muted: #bab7ad; --border: #505149; --control: #848679; --link: #ff966f; color-scheme: dark; } }
.logo-lockup { display: block; position: relative; width: 100%; }
.logo-lockup .horizontal-logo { display: block; width: 100%; height: auto; background: transparent; }
.brand .logo-lockup { width: 164px; }
.footer-identity .brand .logo-lockup { width: 140px; }
.logo-dark-wordmark { display: none; position: absolute; inset: 0; background: var(--text); mask: url('/img/techtix-horizontal-primary.png') center / contain no-repeat; -webkit-mask: url('/img/techtix-horizontal-primary.png') center / contain no-repeat; clip-path: inset(0 0 0 26%); pointer-events: none; }
[data-theme='dark'] .logo-dark-wordmark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .logo-dark-wordmark { display: block; } }
.header-row { gap: 24px; }
.desktop-nav { gap: 24px; }
.header-phone { font-size: 13px; }
.theme-toggle { min-height: 44px; min-width: 44px; padding: 10px 0 10px 14px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 13px; }
.theme-toggle:hover { color: var(--text); }
.global-hero { padding: 64px 0 78px; }
.global-hero-grid { grid-template-columns: 5fr 6fr; gap: 85px; align-items: start; }
.global-hero h1 { font: 500 clamp(2.2rem,3.7vw,3.1rem)/1.16 'Space Grotesk',sans-serif; letter-spacing: -.05em; margin-bottom: 24px; }
.global-hero h1 span { color: var(--text); }
.global-lead { font-size: 18px; line-height: 1.6; max-width: 33ch; }
.global-hero .actions { margin-top: 24px; gap: 22px; }
.founder-note { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 33ch; }
.hero-project { margin-top: 45px; }
.hero-project figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.hero-project figcaption { align-items: center; padding-top: 5px; }
.global-services { display: grid; grid-template-columns: 4fr 7fr; gap: 85px; padding: 32px 0 60px; }
.global-services-heading { display: block; margin: 0; }
.global-services-heading h2 { font-size: 1.8rem; }
.global-services-heading p { font-size: 16px; max-width: 29ch; }
.service-shortcuts { display: block; margin: 0; }
.service-shortcuts > div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.service-shortcuts > div:first-child { padding-top: 0; }
.service-shortcuts dt a { display: inline-flex; min-height: 44px; align-items: center; font-size: 19px; padding: 0; border: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--border); }
.service-shortcuts dt a:hover { color: var(--link); text-decoration-color: var(--link); }
.service-shortcuts dd { margin: 0; padding-top: 7px; color: var(--muted); font-size: 15px; }
.global-services > [aria-hidden] { display: none; }
.selected-work { padding: 36px 0 65px; }
.work-strip-heading { display: grid; grid-template-columns: 5fr 6fr; gap: 85px; align-items: end; margin-bottom: 32px; }
.work-strip-heading h2 { font: 400 2.4rem/1.12 Georgia,serif; }
.work-strip-heading p { margin: 0; color: var(--muted); font-size: 16px; }
.work-tile { display: block; width: 87%; margin-left: auto; }
.work-tile-caption { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 14px; color: var(--muted); font-size: 14px; }
.work-tile-caption > span { color: var(--link); }
.work-tile:hover img { transform: none; }
.midhurst-grid { grid-template-columns: 5fr 4fr; gap: 100px; }
.midhurst-section h2 { font-size: 2.7rem; }
.midhurst-section p { max-width: 42ch; font-size: 16px; }
.local-contact { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.midhurst-project figcaption { font-size: 12px; }
.global-contact { display: grid; grid-template-columns: 5fr 6fr; gap: 85px; padding: 48px 0; }
.global-contact h2 { font-size: 1.8rem; margin-bottom: 12px; }
.global-contact p { max-width: 32ch; margin-bottom: 0; color: var(--muted); font-size: 16px; }
.global-contact-links { display: flex; flex-direction: column; gap: 0; margin: 0; }
.global-contact-links a { color: var(--text); font-size: 18px; }
.global-contact-links .contact-form-link { color: var(--link); font-size: 14px; margin-top: 8px; }
.services-layout { display: block; }
.services-intro { display: grid; grid-template-columns: 4fr 7fr; gap: 85px; align-items: start; padding-bottom: 40px; }
.services-intro > p { max-width: 38ch; font-size: 20px; margin: 8px 0 0; }
.service-row { display: grid; grid-template-columns: 4fr 7fr; gap: 85px; align-items: center; padding: 20px 0; }
.service-row h2 { font-size: 25px; }
.service-row h2 a { justify-content: start; }
.service-row h2 span { display: none; }
.service-row p { max-width: 48ch; font-size: 17px; }
.prose.service-detail { max-width: 1160px; }
.service-detail h1 { font-size: clamp(2.3rem,4vw,3.4rem); }
.service-detail > .lead { max-width: 40ch; }
.service-detail-columns { margin-top: 42px; border-top: 1px solid var(--border); padding-top: 12px; display: grid; grid-template-columns: 4fr 6fr; gap: 100px; }
.service-detail-columns h2 { font-size: 1.5rem; }
.service-detail-columns ul { padding-left: 20px; color: var(--muted); }
.service-detail-columns > section > p { max-width: 45ch; }
.service-detail .note { border: 0; padding: 16px 0 0; border-top: 1px solid var(--border); font-size: 14px; }
.service-detail .call-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.about-page { padding: 65px 0 55px; }
.about-opening { display: grid; grid-template-columns: 4fr 7fr; gap: 85px; border-bottom: 1px solid var(--border); padding-bottom: 35px; }
.about-opening h1 { font-size: 3rem; max-width: 8ch; }
.about-opening .lead { font: 400 1.9rem/1.35 Georgia,serif; color: var(--text); max-width: 30ch; }
.about-opening p { max-width: 46ch; }
.about-body { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.about-body h2 { font-size: 1.6rem; }
.about-body p { max-width: 43ch; font-size: 17px; }
.about-page .trading-note { border: 0; margin-top: 25px; padding-top: 0; }
.project-lead { grid-template-columns: 7fr 4fr; gap: 65px; }
.project-sequence { grid-template-columns: 6fr 5fr; gap: 55px; align-items: start; margin-top: 65px; }
.project-sequence .project-feature { display: block; }
.project-sequence .project-feature:last-child { margin-top: 90px; }
.project-sequence .project-copy { padding-top: 25px; max-width: 44ch; }
.project-copy h2 { font-size: 2rem; }
.section-heading-row h1 { font-size: 3.3rem; }
.page-next h2 { font-size: 1.7rem; }
.testimonials-heading h2 { font-size: 1.7rem; }
.contact-grid { grid-template-columns: 4fr 6fr; gap: 100px; }
.contact-grid h1 { font-size: 3.3rem; }
@media (max-width: 1100px) and (min-width: 701px) {
 .header-row { gap: 16px; } .desktop-nav { gap: 16px; } .brand .logo-lockup { width: 145px; } .header-phone { font-size: 12px; }
 .global-hero-grid,.global-services,.work-strip-heading,.midhurst-grid,.global-contact,.services-intro,.service-row,.about-opening,.about-body,.contact-grid,.service-detail-columns { gap: 45px; }
 .global-hero h1 { font-size: 2.45rem; } .hero-project { margin-top: 35px; }
 .project-lead,.project-sequence { gap: 30px; } .project-sequence .project-feature:last-child { margin-top: 65px; }
}
@media (max-width: 900px) { .theme-toggle { margin-left: auto; } .menu-trigger { margin-left: 0; } }
@media (max-width: 700px) {
 .brand .logo-lockup { width: 132px; } .header-row { gap: 16px; } .theme-toggle { padding-left: 12px; }
 .global-hero { padding: 38px 0 40px; } .global-hero-grid { grid-template-columns: 1fr; gap: 28px; }
 .global-hero h1 { font-size: clamp(2rem,8.5vw,2.9rem); line-height: 1.17; } .hero-project { margin-top: 0; }
 .global-lead { font-size: 17px; } .founder-note { margin-top: 26px; }
 .global-services { grid-template-columns: 1fr; gap: 20px; padding: 28px 0 40px; } .global-services-heading h2 br { display: none; }
 .global-services-heading p { max-width: 38ch; margin-bottom: 8px; }
 .service-shortcuts > div { grid-template-columns: 1fr; gap: 0; padding-block: 14px; }
 .service-shortcuts dd { padding-top: 0; } .service-shortcuts dt a { min-height: 40px; font-size: 19px; }
 .work-strip-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 22px; } .work-strip-heading h2 { font-size: 2rem; }
 .work-tile { width: 100%; } .work-tile-caption { align-items: start; flex-direction: column; gap: 6px; font-size: 13px; }
 .selected-work { padding: 28px 0 40px; } .midhurst-grid { grid-template-columns: 1fr; gap: 24px; } .midhurst-section h2 { font-size: 2.25rem; }
 .global-contact { grid-template-columns: 1fr; gap: 20px; padding-block: 35px; }
 .global-contact-links a { font-size: 17px; }
 .services-intro,.service-row,.service-detail-columns,.about-opening,.about-body,.contact-grid { grid-template-columns: 1fr; gap: 18px; }
 .services-intro { padding-bottom: 25px; } .services-intro h1 { margin-bottom: 0; } .services-intro > p { font-size: 18px; margin: 0; }
 .service-row { gap: 0; padding: 12px 0 22px; } .service-row h2 { font-size: 23px; } .service-row p { font-size: 16px; }
 .service-detail-columns { margin-top: 28px; gap: 6px; } .service-detail h1 { font-size: 2.35rem; }
 .service-detail-columns h2 { margin-top: 22px; } .service-detail-columns .actions { margin-top: 22px; }
 .about-page { padding: 35px 0 40px; } .about-opening { padding-bottom: 22px; } .about-opening h1 { max-width: none; font-size: 2.7rem; margin-bottom: 8px; }
 .about-opening .lead { font-size: 1.6rem; } .about-body { margin-top: 28px; gap: 18px; } .about-body p { font-size: 16px; }
 .project-lead { grid-template-columns: 1fr; gap: 24px; } .project-sequence { grid-template-columns: 1fr; gap: 40px; margin-top: 45px; }
 .project-sequence .project-feature:last-child { margin-top: 0; } .project-sequence .project-copy { padding-top: 22px; }
 .section-heading-row h1,.contact-grid h1 { font-size: 2.7rem; }
}
.button { color: #171714; }
.desktop-nav a[aria-current='page'], .mobile-nav a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 2px; }
@media (min-width: 901px) { .mobile-nav { display: none; } }
.global-contact > [aria-hidden] { display: none; }

/* Home is an introduction: one connected route from services to a conversation. */
.home-introduction { padding: 64px 0 0; }
.home-opening { display: grid; grid-template-columns: 6fr 5fr; gap: 90px; align-items: start; padding-bottom: 54px; }
.home-opening h1 { font: 500 clamp(2.6rem,4.5vw,4rem)/1.09 'Space Grotesk',sans-serif; letter-spacing: -.065em; margin: 0 0 28px; }
.home-location { font-size: 12px; color: var(--muted); margin: 0; }
.home-opening-copy > p { font-size: 18px; color: var(--muted); max-width: 40ch; }
.home-opening-copy > p + p { font-size: 16px; margin-top: 24px; }
.home-opening-copy .actions { font-size: 14px; gap: 24px; }
.home-services { position: relative; display: grid; grid-template-columns: 4fr 7fr; gap: 90px; padding: 72px 0 84px; }
.home-services > [aria-hidden] { position: absolute; top: 0; }
.home-section-intro h2 { font: 400 2.7rem/1.12 Georgia,serif; letter-spacing: -.04em; }
.home-section-intro p { font-size: 17px; color: var(--muted); max-width: 28ch; }
.home-section-intro > a,.home-person a,.home-local a { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font-size: 14px; }
.home-service-list { margin: 0; }
.home-service-list > div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; border-bottom: 1px solid var(--border); padding: 22px 0; }
.home-service-list > div:first-child { padding-top: 0; }
.home-service-list dt a { display: flex; align-items: start; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 22px; line-height: 1.3; letter-spacing: -.035em; text-decoration: none; color: var(--text); }
.home-service-list dt a:hover { color: var(--link); }.home-service-list dt span { color: var(--link); font-size: 16px; padding-top: 5px; }
.home-service-list dd { margin: 0; font-size: 15px; color: var(--muted); }
.home-person { background: var(--orange); color: #171714; padding: 64px 0; }
.home-person-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 90px; }
.home-person h2 { font: 400 clamp(2.2rem,3.5vw,3.2rem)/1.17 Georgia,serif; letter-spacing: -.045em; }
.home-person p { font-size: 17px; max-width: 40ch; }.home-person a { color: #171714; }
.home-person :focus-visible { outline-color: #171714; }
.home-local { display: grid; grid-template-columns: 6fr 5fr; gap: 90px; padding: 76px 0; border-bottom: 1px solid var(--border); }
.home-local h2 { font-size: 2.3rem; line-height: 1.2; letter-spacing: -.045em; }
.home-local p { color: var(--muted); font-size: 17px; max-width: 40ch; }
.global-home .global-contact { padding: 64px 0; grid-template-columns: 6fr 5fr; gap: 90px; }.global-home .global-contact h2 { font: 400 2.7rem/1.15 Georgia,serif; letter-spacing: -.04em; }
@media (max-width: 1200px) and (min-width: 901px) { .header-phone { display: none; } }
@media (max-width: 1100px) and (min-width: 701px) { .home-opening,.home-services,.home-person-grid,.home-local,.global-home .global-contact { gap: 45px; }.home-service-list > div { gap: 24px; grid-template-columns: 1fr; }}
@media (max-width: 700px) {
 .home-introduction { padding-top: 34px; }.home-opening { grid-template-columns: 1fr; gap: 30px; padding-bottom: 32px; }.home-opening h1 { font-size: clamp(2.2rem,9.7vw,3.2rem); margin-bottom: 20px; }.home-location { font-size: 11px; }
 .home-opening-copy > p { font-size: 17px; }.home-opening-copy > p + p { font-size: 15px; margin-top: 18px; }.home-opening-copy .actions { gap: 16px; font-size: 13px; }.home-opening-copy .button { font-size: 13px; padding: 12px 16px; gap: 14px; }
 .home-services { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 48px; }.home-section-intro h2 { font-size: 2.2rem; }.home-section-intro p { max-width: 36ch; font-size: 16px; }
 .home-service-list > div { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }.home-service-list dt a { font-size: 21px; min-height: 38px; }.home-service-list dd { font-size: 15px; max-width: 40ch; }
 .home-person { padding: 40px 0; }.home-person-grid,.home-local,.global-home .global-contact { grid-template-columns: 1fr; gap: 24px; }.home-person h2 { font-size: 2.2rem; margin-bottom: 0; }.home-person p,.home-local p { font-size: 16px; }
 .home-local { padding: 44px 0; }.home-local h2 { font-size: 1.95rem; margin-bottom: 0; }.global-home .global-contact { padding: 44px 0; }.global-home .global-contact h2 { font-size: 2.3rem; }
}

/* The web design page carries the same attention to the work as the home page. */
.web-design-opening { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; margin-top: 18px; }
.web-design-opening h1 { font-size: clamp(2.4rem,4vw,3.6rem); line-height: 1.08; margin-bottom: 0; }
.web-design-opening .lead { font-size: 20px; margin-top: 4px; max-width: 36ch; }
.service-project { margin: 70px 0 0; }.service-project > a { display: block; padding: 48px 12%; background: #dce3d4; }.service-project img { display: block; width: 100%; height: auto; }
.service-project figcaption { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-top: 24px; }
.service-project figcaption h2 { font: 400 2rem/1.2 Georgia,serif; margin: 0 0 8px; }.service-project figcaption p { font-size: 14px; color: var(--muted); margin: 0; }
.service-project figcaption > a { min-height: 44px; display: inline-flex; align-items: center; gap: 20px; font-size: 14px; }
.project-lead .project-image { background: #dce3d4; padding: 36px 28px; }.project-sequence .project-feature:first-child .project-image { background: #d9cfb7; padding: 32px 24px; }.project-sequence .project-feature:last-child .project-image { background: #bfc7ce; padding: 32px 24px; }
@media (max-width: 700px) { .web-design-opening { grid-template-columns: 1fr; gap: 24px; margin-top: 10px; }.web-design-opening .lead { font-size: 18px; }.service-project { margin-top: 44px; }.service-project > a { padding: 26px 20px; }.service-project figcaption { display: block; }.service-project figcaption > a { margin-top: 12px; }.project-lead .project-image,.project-sequence .project-feature .project-image { padding: 24px 18px; } }
/* Navigation stays available without covering section headings. */
html { scroll-padding-top: 118px; scroll-behavior: smooth; }
.site-header { position: sticky; top: 0; z-index: 40; background: var(--bg); }
.midhurst-section { scroll-margin-top: 0; }
.skip-link { z-index: 50; }
.back-to-top { position: fixed; z-index: 45; right: 24px; bottom: max(24px,env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 20px; min-height: 44px; padding: 10px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--control); border-radius: 0; font-size: 13px; }
.back-to-top:hover { border-color: var(--link); color: var(--link); }
@media (max-width: 900px) { html { scroll-padding-top: 96px; } }
@media (max-width: 700px) { .back-to-top { right: 16px; bottom: max(16px,env(safe-area-inset-bottom)); font-size: 12px; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Two navigation groups, with a compact appearance control. */
.desktop-nav { align-items: center; gap: 28px; }
.nav-group { display: flex; align-items: center; gap: 24px; }
.nav-company { padding-left: 28px; border-left: 1px solid var(--border); }
.desktop-nav .nav-contact { gap: 10px; color: var(--link); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 44px; height: 44px; border: 0; margin-left: 4px; color: var(--text); flex-shrink: 0; }
.theme-toggle svg { display: block; width: 20px; height: 20px; }
.theme-sun { display: none; } .theme-moon { display: block; }
[data-theme='dark'] .theme-sun { display: block; } [data-theme='dark'] .theme-moon { display: none; }
.mobile-nav { gap: 22px; padding-top: 8px; padding-bottom: 24px; }
.nav-group-label { color: var(--muted); font-size: 11px; margin: 0 0 6px; }
.mobile-nav-group a { font-size: 18px; }
.mobile-nav .mobile-nav-phone { justify-content: space-between; font-size: 14px; color: var(--link); }
.home-service-list dt .service-name { display: flex; align-items: center; gap: 13px; color: var(--text); font-size: inherit; padding: 0; }
.home-service-list dt .service-name > span:last-child { color: inherit; font-size: inherit; padding: 0; }
.home-service-list dt .service-symbol { display: flex; align-items: center; color: var(--link); padding: 0; flex-shrink: 0; }
.service-symbol svg { width: 22px; height: 22px; }
.home-service-list dt a:hover .service-name { color: var(--link); }
@media (min-width: 901px) and (max-width: 1100px) { .desktop-nav { gap: 20px; }.nav-group { gap: 20px; }.nav-company { padding-left: 20px; } }
@media (max-width: 900px) { .desktop-nav { display: none; }.theme-toggle { margin-left: auto; }.header-row { gap: 14px; } }
@media (max-width: 700px) { .home-service-list dt .service-name { gap: 12px; }.service-symbol svg { width: 20px; height: 20px; } }

/* The motto leads the homepage; the original logo remains on the opening screen. */
.home-brand-opening h1 { font-size: clamp(2rem,3.1vw,2.8rem); line-height: 1.16; letter-spacing: -.045em; margin-bottom: 24px; }
.home-services-summary { margin: 46px 0 0; font-size: 2.1rem; line-height: 1.25; letter-spacing: -.045em; max-width: 18ch; }
.intro-motto { text-align: center; margin: 28px 0 0; font-size: 18px; line-height: 1.5; letter-spacing: -.025em; color: var(--text); }
@media (max-width: 700px) { .home-brand-opening h1 { font-size: clamp(1.8rem,7.5vw,2.35rem); }.home-services-summary { margin-top: 28px; font-size: 1.8rem; }.intro-motto { margin-top: 22px; font-size: 14px; } }

/* Live brand typography over strands drawn from the supplied artwork. */
.artwork-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: calc(100svh - 95px); padding: 64px 0 100px; background: #031020; overflow: hidden; }
.artwork-content { position: relative; z-index: 1; }
.artwork-logo { width: min(420px,70%); margin-bottom: 48px; }
.artwork-logo .logo-dark-wordmark { display: block; clip-path: none; background: #fff; }
.artwork-content h1 { color: #fff; font-size: clamp(2.5rem,4.4vw,4rem); line-height: 1.17; font-weight: 700; letter-spacing: -.045em; margin: 0 0 40px; }
.artwork-services { font-size: 14px; font-weight: 600; color: #ff966f; margin: 0; text-transform: uppercase; word-spacing: .2em; }
.artwork-scroll { position: absolute; z-index: 2; bottom: 20px; left: max(32px,calc((100% - 1160px)/2)); min-height: 44px; display: inline-flex; align-items: center; gap: 28px; font-size: 13px; color: #fff; text-decoration: none; }
.artwork-scroll span { color: #ff966f; }.artwork-scroll:focus-visible { outline-color: #ff966f; }
/* The SVG converts the original strands to transparent alpha itself. This avoids
   mobile browsers treating the opaque PNG as a solid orange rectangle. */
body::before,.artwork-hero::before,.home-person::before {
 content: ''; pointer-events: none; background: linear-gradient(90deg,transparent,#ef3b00 45%);
 -webkit-mask-image: url('/img/techtix-helix-mask.svg'); mask-image: url('/img/techtix-helix-mask.svg'); mask-mode: alpha;
 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
 -webkit-mask-position: right center; mask-position: right center;
 -webkit-mask-size: auto max(1300px,100vh); mask-size: auto max(1300px,100vh);
}
body::before { position: fixed; top: 95px; right: 0; bottom: 0; width: min(58vw,800px); opacity: .3; z-index: 0; }
[data-theme='dark'] body::before { opacity: .55; }
main,.site-footer { position: relative; z-index: 1; }
.artwork-hero::before { position: absolute; top: 0; right: 0; bottom: 0; width: min(65vw,900px); opacity: 1; z-index: -1; }
.home-person { position: relative; isolation: isolate; overflow: hidden; }
.home-person::before { position: absolute; top: 0; right: 0; bottom: 0; width: min(58vw,800px); z-index: -1; background: linear-gradient(90deg,transparent,#171714 45%); opacity: .35; }
@media (max-width: 900px) { .artwork-hero { min-height: calc(100svh - 77px); } body::before { top: 77px; } }
@media (max-width: 700px) {
 .artwork-hero { padding: 46px 0 100px; align-items: flex-start; }
 .artwork-logo { width: min(300px,90%); margin-bottom: 44px; }
 .artwork-content h1 { font-size: clamp(1.85rem,7.9vw,2.8rem); margin-bottom: 32px; }
 .artwork-services { font-size: 11px; line-height: 1.8; word-spacing: 0; }
 .artwork-scroll { left: 20px; }
 body::before,.artwork-hero::before,.home-person::before { -webkit-mask-size: auto max(480px,120vw); mask-size: auto max(480px,120vw); }
 .artwork-hero::before { width: 100%; opacity: 1; }
 body::before,.home-person::before { width: 100%; opacity: .3; }
 [data-theme='dark'] body::before { opacity: .35; }
}

/* The homepage opening is uninterrupted; navigation appears as it passes. */
.home-navigation { scroll-padding-top: 95px; }
.home-navigation .site-header { position: fixed; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; transform: translateY(-100%); opacity: 0; transition: transform .3s ease,opacity .3s ease,visibility 0s .3s; }
.home-navigation.navigation-visible .site-header { visibility: visible; pointer-events: auto; transform: none; opacity: 1; transition-delay: 0s; }
.home-navigation .artwork-hero { min-height: 100svh; }
@media (max-width: 900px) { .home-navigation { scroll-padding-top: 77px; } }

/* The strands move gently relative to the page, without shifting its content. */
body::before { -webkit-mask-position: right calc(50% - var(--helix-drift,0px)); mask-position: right calc(50% - var(--helix-drift,0px)); }
.artwork-hero::before { -webkit-mask-position: right calc(50% + var(--hero-helix-drift,0px)); mask-position: right calc(50% + var(--hero-helix-drift,0px)); }
@media (max-width: 700px) { .artwork-hero::before { -webkit-mask-position: right calc(100% + var(--hero-helix-drift,0px)); mask-position: right calc(100% + var(--hero-helix-drift,0px)); } }
@keyframes mobile-menu-enter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) { .mobile-nav:not([hidden]) { animation: mobile-menu-enter .24s ease-out; } }
@media (prefers-reduced-motion: reduce) { body::before,.artwork-hero::before { -webkit-mask-position: right center; mask-position: right center; } }
/* South Africa: a regional page within the main Techtix Global identity. */
.za-opening { padding-block: 36px 70px; }
.za-region { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 27px; margin-bottom: 48px; border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: .06em; }
.za-region > span { color: var(--muted); }
.za-region a { display: inline-flex; align-items: center; min-height: 44px; letter-spacing: 0; }
.za-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; }
.za-hero-grid h1 { font-size: clamp(2.8rem,4.5vw,4rem); letter-spacing: -.055em; line-height: 1.12; }
.za-hero-grid h1 span { color: var(--link); }
.za-hero-grid .lead { color: var(--text); font-size: 23px; max-width: 29ch; }
.za-hero-grid p:not(.lead) { color: var(--muted); max-width: 42ch; }
.za-hero-grid .actions { gap: 16px 24px; font-size: 14px; }
.za-project { margin: 0; min-width: 0; }
.za-project img { width: 100%; height: auto; display: block; }
.za-project figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-top: 15px; color: var(--muted); font-size: 12px; }
.za-services { padding-block: 45px 70px; border-top: 1px solid var(--border); scroll-margin-top: 110px; }
.za-section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; margin-bottom: 24px; }
.za-section-heading > p { max-width: 40ch; color: var(--muted); padding-top: 38px; }
.za-section-heading .eyebrow { font-size: 12px; }
.za-service-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 65px; }
.za-service-list article { display: grid; grid-template-columns: 32px 1fr; gap: 15px; border-top: 1px solid var(--border); padding-block: 22px 25px; }
.za-service-number { color: var(--muted); font-size: 12px; padding-top: 10px; }
.za-service-list h3 { margin-bottom: 7px; }
.za-service-list h3 a { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; color: var(--text); text-decoration: none; }
.za-service-list h3 a:hover,.za-service-list h3 a span { color: var(--link); }
.za-service-list p { color: var(--muted); font-size: 16px; max-width: 40ch; margin: 0; }
.za-company { background: var(--tint); padding-block: 60px; }
.za-company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; }
.za-company-grid h2 { font: 400 clamp(2.2rem,3.4vw,3rem)/1.18 Georgia,serif; letter-spacing: -.04em; }
.za-company-grid p { max-width: 42ch; color: var(--muted); }
.za-company-grid > div > a { display: inline-flex; align-items: center; min-height: 44px; }
.za-company-details { border-left: 1px solid var(--border); padding-left: 40px; }
.za-company-details h3 { margin-bottom: 12px; }
.za-registration { font-size: 13px; }
.za-company-details dl { margin: 25px 0 0; }
.za-company-details dl > div { border-top: 1px solid var(--border); padding-block: 17px; }
.za-company-details dt { font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.za-company-details dd { margin: 0; font-size: 16px; }
.za-company-details address { font-style: normal; }
.za-page #terminal { scroll-margin-top: 100px; }
@media (max-width: 1050px) { .za-hero-grid,.za-section-heading,.za-service-list { column-gap: 35px; }.za-company-grid { gap: 40px; }.za-hero-grid .button { padding-inline: 18px; } }
@media (max-width: 700px) { .za-opening { padding-block: 20px 40px; }.za-region { align-items: flex-start; flex-direction: column; gap: 4px; margin-bottom: 28px; padding-bottom: 15px; font-size: 11px; }.za-hero-grid,.za-section-heading,.za-service-list,.za-company-grid { grid-template-columns: 1fr; gap: 28px; }.za-hero-grid h1 { font-size: clamp(2.7rem,9vw,3.5rem); }.za-hero-grid .lead { font-size: 21px; }.za-project figcaption { font-size: 11px; }.za-services { padding-block: 35px 40px; }.za-section-heading { gap: 0; }.za-section-heading > p { padding-top: 0; }.za-section-heading h2 { font-size: 1.8rem; }.za-service-list { gap: 0; }.za-service-list article { padding-block: 17px 22px; }.za-company { padding-block: 38px; }.za-company-details { border-left: 0; border-top: 1px solid var(--border); padding: 25px 0 0; } }

/* South African section navigation and service pages. */
.za-site-strip { border-bottom: 1px solid var(--border); background: var(--tint); }
.za-site-strip > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; }
.za-site-strip a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text); text-decoration: none; }
.za-site-strip a:first-child { letter-spacing: .08em; }
.za-footer-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px 30px; padding: 20px 0; border-top: 1px solid var(--border); }
.za-footer-services a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-decoration: none; color: var(--muted); }
.za-footer-services a:hover { color: var(--link); text-decoration: underline; }
.za-subpage-heading { padding-block: 45px 50px; }
.za-subpage-heading h1 { max-width: 22ch; font-size: clamp(2.6rem,4.8vw,4rem); }
.za-subpage-heading .lead { max-width: 46ch; }
.za-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; margin-bottom: 30px; color: var(--muted); }
.za-breadcrumb a { min-height: 30px; display: inline-flex; align-items: center; }
.za-breadcrumb > span { display: inline-flex; align-items: center; }
.za-service-detail { display: grid; grid-template-columns: 6fr 4fr; gap: 90px; padding-block: 10px 65px; }
.za-service-detail h2 { font-size: 1.6rem; }
.za-service-detail section > p { max-width: 49ch; }
.za-service-detail aside { border-left: 1px solid var(--border); padding-left: 35px; color: var(--muted); font-size: 16px; }
.za-service-detail aside h2 { color: var(--text); }
.za-inclusions { list-style: none; padding: 0; margin: 0 0 40px; }
.za-inclusions li { padding: 15px 0; border-bottom: 1px solid var(--border); }
.za-inclusions li:first-child { border-top: 1px solid var(--border); }
.za-service-image { display: block; width: 100%; height: auto; margin-bottom: 28px; }
.za-coverage-note { margin-top: 32px; padding-top: 25px; border-top: 1px solid var(--border); }
.za-coverage-note .eyebrow { font-size: 12px; margin-bottom: 15px; }
.za-related { padding-block: 30px 65px; border-top: 1px solid var(--border); }
.za-related h2 { font-size: 1.6rem; }
.za-related-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px 30px; }
.za-related-links a { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 54px; font-size: 15px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.za-related-links a span { color: var(--link); }
.za-coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.za-contact-breadcrumb { padding-top: 30px; font-size: 14px; }
.za-contact-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.za-contact-notes { padding-block: 30px 55px; border-top: 1px solid var(--border); }
.za-contact-notes h2 { font-size: 1.6rem; }
.za-contact-notes p { max-width: 65ch; color: var(--muted); }
.za-page .form-group select { font: inherit; width: 100%; min-height: 48px; padding: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--control); border-radius: 0; }
.za-work { padding-block: 0 60px; }
.za-work-note { margin-top: 40px; padding-block: 25px; border-block: 1px solid var(--border); }
.za-work-note p { max-width: 48ch; }
@media(max-width:900px) { .za-service-detail { gap: 40px; }.za-related-links { grid-template-columns: repeat(2,1fr); } }
@media(max-width:700px) { .za-subpage-heading { padding-block: 30px 35px; }.za-subpage-heading h1 { font-size: 2.6rem; }.za-service-detail,.za-coverage-grid { grid-template-columns: 1fr; gap: 30px; }.za-service-detail aside { border-left: 0; border-top: 1px solid var(--border); padding: 25px 0 0; }.za-footer-services { grid-template-columns: repeat(2,1fr); gap: 2px 15px; }.za-footer-services a { font-size: 12px; }.za-related-links { grid-template-columns: 1fr; }.za-site-strip > div { font-size: 10px; gap: 12px; }.za-site-strip a:first-child { letter-spacing: .02em; }.za-service-detail { padding-bottom: 40px; } }