@font-face { font-family:Outfit; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/outfit-latin.woff2') format('woff2'); }
:root { --paper:#faf9f6; --surface:#fff; --ink:#25222b; --muted:#615d68; --line:#dedbe3; --accent:#5742a0; --accent-dark:#44327e; --wash:#efedf4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; font-family:Outfit,Arial,sans-serif; color:var(--ink); background:var(--paper); font-size:17px; line-height:1.6; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-underline-offset:4px; }
img { max-width:100%; display:block; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:500; line-height:1.1; letter-spacing:-.035em; }
h1 { font-size:60px; } h2 { font-size:40px; } h3 { font-size:29px; }
p { color:var(--muted); }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:16px; z-index:5; padding:12px 18px; background:var(--ink); color:#fff; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.shell { width:100%; max-width:1264px; padding:0 32px; margin:auto; }
.section { padding:88px 0; scroll-margin-top:100px; }
.anchor-alias { display:block; height:0; scroll-margin-top:110px; }
.eyebrow { font-size:12px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:25px; padding:13px 22px; border:1px solid transparent; border-radius:5px; font-size:15px; font-weight:500; text-decoration:none; transition:background .18s,transform .18s; }
.button-primary { background:var(--accent); color:#fff; }
.button-primary:hover { background:var(--accent-dark); }
.button:active { transform:translateY(1px); }
.button[disabled] { opacity:.65; cursor:wait; }
.text-link { display:inline-flex; align-items:center; gap:18px; min-height:44px; font-size:15px; font-weight:500; text-decoration:none; border-bottom:1px solid var(--line); color:var(--ink); }
.text-link:hover { color:var(--accent); border-color:var(--accent); }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:30px; }
.nav { position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--line); z-index:3; }
.nav-inner { height:94px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo img { width:202px; height:auto; }
.nav-links { display:flex; gap:28px; list-style:none; padding:0; margin:0; }
.nav-links a { text-decoration:none; font-size:14px; display:block; padding:12px 0; }
.nav-links a:hover { color:var(--accent); }
.nav-right { display:flex; gap:16px; align-items:center; }
.nav-right .button { font-size:14px; gap:20px; }
.nav-toggle,.mobile-booking { display:none; }
.hero { padding:72px 0 60px; }
.hero-grid { display:grid; grid-template-columns:.93fr 1.07fr; gap:56px; align-items:center; }
.hero .eyebrow { display:flex; gap:10px; align-items:center; margin-bottom:26px; }
.brand-line { height:1px; width:24px; background:var(--accent); flex-shrink:0; }
.hero h1 span { color:var(--accent); }
.hero-intro { font-size:19px; max-width:420px; margin-top:25px; line-height:1.6; }
.hero-person { display:flex; gap:12px; align-items:center; margin-top:34px; }
.hero-person img { border-radius:50%; object-fit:cover; object-position:50% 25%; width:46px; height:46px; }
.hero-person p { font-size:13px; line-height:1.5; }
.hero-person strong,.hero-person p>span { display:block; }
.hero-person strong { font-weight:500; color:var(--ink); }
.hero-work { display:block; background:#e9e7ed; border:1px solid #cecad7; border-radius:8px; overflow:hidden; text-decoration:none; box-shadow:0 16px 35px -20px #38304435; }
.browser-top { height:37px; background:#eeeaf2; display:flex; justify-content:space-between; align-items:center; padding:0 14px; font-size:10px; color:var(--muted); }
.browser-dots { display:flex; gap:4px; }
.browser-dots i { width:5px; height:5px; background:#a09ba8; border-radius:50%; }
.hero-capture { width:100%; height:auto; aspect-ratio:1.44; object-fit:cover; object-position:top; }
.hero-caption { padding:14px 16px; display:flex; gap:16px; justify-content:space-between; font-size:11px; background:#fff; color:var(--muted); }
.hero-caption span:last-child { color:var(--accent); white-space:nowrap; }
.work-section { background:#fff; border-top:1px solid var(--line); padding-top:64px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:40px; }
.section-heading .eyebrow { margin-bottom:15px; }
.section-heading>p { font-size:15px; line-height:1.5; }
.project-explorer { display:grid; grid-template-columns:300px minmax(0,1fr); gap:42px; }
.project-choice { width:100%; display:flex; align-items:center; justify-content:space-between; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; padding:20px 16px; color:var(--ink); border-left:3px solid transparent; transition:background .18s; }
.project-choice small { display:block; font-size:11px; line-height:1.5; letter-spacing:.025em; color:var(--muted); }
.project-choice strong { display:block; font-size:20px; font-weight:500; margin-top:3px; }
.project-choice>span:last-child { font-size:20px; color:var(--muted); }
.project-choice:hover { background:#f8f6fa; }
.project-choice[aria-pressed=true] { background:var(--wash); border-left-color:var(--accent); }
.project-choice[aria-pressed=true]>span:last-child { color:var(--accent); }
.project-context { padding:30px 16px 0; }
.project-context .eyebrow { margin-bottom:12px; }
.project-context h3 { font-size:23px; line-height:1.25; letter-spacing:-.025em; }
.project-context p:not(.eyebrow) { font-size:15px; line-height:1.6; margin-top:14px; }
.project-context .text-link { margin-top:16px; }
.project-preview { min-width:0; }
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:#f5f3f7; border:1px solid var(--line); border-radius:8px 8px 0 0; font-size:11px; }
.preview-toolbar>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-choices { display:flex; gap:2px; flex-shrink:0; }
.device-choices button { background:transparent; border:1px solid transparent; border-radius:3px; min-height:44px; padding:5px 10px; font-size:12px; color:var(--muted); }
.device-choices button[aria-pressed=true] { background:#fff; border-color:var(--line); color:var(--ink); }
.project-stage { background:#eeedf0; border:1px solid var(--line); border-top:0; border-radius:0 0 8px 8px; aspect-ratio:1.44; display:flex; justify-content:center; align-items:flex-start; overflow:hidden; }
.project-stage img { width:100%; height:100%; object-fit:contain; object-position:top; }
.project-stage.is-mobile { padding:14px; }
.project-stage.is-mobile img { width:auto; max-width:100%; height:100%; border:1px solid #ccc6d3; border-radius:10px; box-shadow:0 7px 20px #25222b15; }
.preview-note { font-size:11px; text-align:right; margin-top:10px; }
.services-section { background:var(--paper); border-bottom:1px solid var(--line); }
.service-explorer { display:grid; grid-template-columns:.85fr 1.15fr; gap:75px; align-items:start; }
.service-choices button { display:flex; align-items:center; gap:20px; min-height:74px; background:transparent; border:0; border-bottom:1px solid var(--line); width:100%; text-align:left; padding:14px 8px; font-size:20px; color:var(--muted); }
.service-choices button>span:first-child { font-size:12px; color:var(--muted); }
.service-choices button>span:last-child { margin-left:auto; }
.service-choices button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); }
.service-choices button[aria-pressed=true]>span:first-child { color:var(--accent); }
.service-choices button:hover { color:var(--accent); }
.service-panel { padding:8px 0; }
.service-panel .eyebrow { margin-bottom:14px; }
.service-panel h3 { font-size:34px; }
.service-panel>p:not(.eyebrow):not(.scope-note) { margin:20px 0; max-width:48ch; }
.scope-list { list-style:none; margin:22px 0; padding:0; font-size:15px; }
.scope-list li { padding:7px 0 7px 22px; position:relative; }
.scope-list li:before { content:'+'; position:absolute; left:0; color:var(--accent); font-weight:500; }
.service-panel .text-link { margin-top:4px; }
.section-footnote { margin-top:42px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; }
.section-footnote a { margin-left:12px; }
.scope-note { font-size:12px; line-height:1.65; margin-top:18px; }
.service-panel+.service-panel { margin-top:36px; }
.is-ready .service-panel+.service-panel { margin-top:0; }
.learning-section { background:#eeedf2; }
.learning-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:64px; align-items:center; }
.learning-image { display:block; border:1px solid #d5d1dd; border-radius:7px; overflow:hidden; background:#fff; }
.learning-image img { width:100%; height:auto; }
.learning-copy h2 { font-size:34px; line-height:1.15; }
.learning-copy>p:not(.eyebrow):not(.project-status):not(.scope-note) { margin-top:20px; font-size:16px; }
.project-status { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; margin:-4px 0 20px; }
.project-status>span { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.contribution { font-size:13px!important; }
.contribution strong { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); font-weight:500; margin-bottom:4px; }
.learning-copy .text-link { margin-top:20px; }
.learning-copy .scope-note { max-width:52ch; }
.about-grid { display:grid; grid-template-columns:280px minmax(0,580px); gap:90px; justify-content:center; align-items:center; }
.about-photo { border-radius:6px; overflow:hidden; background:#eeebf2; }
.about-photo img { height:355px; width:100%; object-fit:cover; object-position:50% 28%; }
.about-grid h2 { font-size:36px; }
.about-grid p:not(.eyebrow) { font-size:16px; margin-top:22px; }
.credential { display:flex; align-items:center; gap:16px; border-top:1px solid var(--line); padding-top:24px; margin:24px 0 14px; }
.credential>a { flex-shrink:0; }
.credential strong { font-size:13px; font-weight:500; display:block; line-height:1.5; }
.credential span { font-size:11px; color:var(--muted); }
.credential div>span:first-of-type { display:block; }
.credential div>a { font-size:11px; display:inline-block; min-height:32px; padding-top:4px; color:var(--accent); }
.contact-section { background:var(--wash); border-top:1px solid var(--line); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; }
.contact-copy h2 { font-size:44px; }
.contact-copy>p:not(.eyebrow):not(.scope-note) { margin:24px 0; max-width:37ch; }
.contact-copy>.scope-note { margin-top:12px; }
.contact-links { display:flex; gap:25px; font-size:14px; margin-top:22px; }
.faq { margin-top:35px; }
.faq details { border-top:1px solid #d3ccdf; }
.faq details:last-child { border-bottom:1px solid #d3ccdf; }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 0; cursor:pointer; list-style:none; font-size:14px; font-weight:500; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:'+'; font-size:22px; font-weight:400; }
.faq details[open] summary:after { content:'−'; }
.faq details p { font-size:14px; margin-bottom:20px; max-width:45ch; }
.contact-form-card { background:#fff; border:1px solid #d7d0e3; border-radius:8px; padding:32px; }
.contact-form-card h3 { font-size:26px; }
.form-intro { font-size:14px; margin:10px 0 25px; }
.enquiry-form { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.enquiry-form .full { grid-column:1/-1; }
.enquiry-form label { display:block; font-size:13px; font-weight:500; margin-bottom:7px; }
.enquiry-form label span { font-weight:400; color:var(--muted); font-size:11px; }
.enquiry-form input,.enquiry-form select,.enquiry-form textarea { background:#fff; width:100%; border:1px solid #cac5d2; border-radius:4px; padding:10px 12px; min-height:46px; font-size:16px; color:var(--ink); }
.enquiry-form textarea { resize:vertical; }
.enquiry-form [aria-invalid=true] { border-color:#a32331; }
.enquiry-form .button { width:100%; margin-top:2px; }
.form-status { font-size:14px; line-height:1.5; margin-top:12px; }
.form-status:empty { display:none; }
.form-status.is-error { color:#a32331; }
.form-status.is-success { color:#146b3b; }
.privacy-note { font-size:11px; margin-top:14px; }
.analytics-notice { position:fixed; bottom:16px; left:16px; max-width:560px; background:#fff; padding:22px; z-index:4; border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 24px #25222b20; }
.analytics-notice .p-actions { display:flex; gap:12px; margin-top:16px; }
.analytics-notice .btn { border:1px solid var(--accent); background:#fff; color:var(--accent); padding:10px 14px; border-radius:4px; min-height:44px; }
.analytics-notice .btn-dark { background:var(--accent); color:#fff; }
.analytics-notice p { font-size:14px; }
footer { background:#27232f; color:#fff; padding:42px 0 22px; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-brand { font-size:25px; font-weight:500; text-decoration:none; letter-spacing:-.025em; }
.footer-brand span { display:block; font-size:12px; font-weight:400; letter-spacing:0; color:#c5bed0; margin-top:8px; }
.footer-links { display:flex; gap:26px; flex-wrap:wrap; }
.footer-links a { color:#e6e0ed; text-decoration:none; font-size:13px; min-height:44px; display:flex; align-items:center; }
.footer-links a:hover { text-decoration:underline; }
.footer-base { display:flex; justify-content:space-between; gap:20px; font-size:11px; color:#c5bed0; border-top:1px solid #504959; margin-top:28px; padding-top:22px; }
@media(max-width:1100px) {
 .nav-links { gap:18px; } .hero-grid { gap:30px; } .hero h1 { font-size:52px; } .hero .eyebrow { font-size:11px; } .hero-intro { font-size:18px; } .hero .actions { gap:16px; } .hero .button { padding:13px 16px; gap:14px; }
 .project-explorer { grid-template-columns:260px minmax(0,1fr); gap:28px; } .project-choice strong { font-size:18px; } .project-context { padding:24px 10px 0; } .project-context h3 { font-size:21px; }
 .service-explorer { gap:50px; } .learning-grid { gap:40px; } .learning-copy h2 { font-size:30px; } .about-grid { gap:60px; } .contact-grid { gap:50px; }
}
@media(max-width:850px) {
 .shell { padding:0 24px; } .nav-inner { height:78px; } .logo img { width:168px; } .nav-toggle { display:flex; align-items:center; gap:18px; min-height:44px; border:1px solid #cac5d2; border-radius:4px; padding:8px 14px; background:transparent; color:var(--ink); font-size:14px; } .nav-toggle span { font-size:20px; } .nav-right .desk { display:none; }
 .nav-links { display:none; position:absolute; top:100%; left:16px; right:16px; background:var(--paper); border:1px solid var(--line); padding:12px 20px; border-radius:0 0 6px 6px; box-shadow:0 15px 25px #25222b15; } .nav-links.open { display:flex; flex-direction:column; gap:0; } .nav-links a { font-size:16px; min-height:48px; } .mobile-booking { display:block; border-top:1px solid var(--line); }
 .hero { padding:46px 0; } .hero-grid { grid-template-columns:1fr 1fr; gap:26px; } .hero h1 { font-size:44px; } .hero .eyebrow { font-size:10px; letter-spacing:.065em; gap:7px; } .brand-line { width:15px; } .hero-intro { font-size:16px; margin-top:20px; } .hero .actions { margin-top:24px; gap:12px; } .hero .button { font-size:14px; } .hero-person { margin-top:24px; } .hero-person p { font-size:11px; } .hero-person img { width:38px; height:38px; } .hero-caption { font-size:10px; padding:10px; } .hero-caption span:last-child { display:none; }
 .section { padding:62px 0; } .section-heading h2 { font-size:34px; } .section-heading>p { font-size:13px; } .project-explorer { grid-template-columns:220px minmax(0,1fr); gap:24px; } .project-choice { padding:15px 10px; } .project-choice small { font-size:10px; } .project-choice strong { font-size:17px; } .project-context h3 { font-size:20px; } .project-context p:not(.eyebrow) { font-size:14px; }
 .preview-toolbar { padding:6px 8px; flex-wrap:wrap; gap:4px; } .preview-toolbar>span { font-size:10px; } .project-stage { aspect-ratio:1.2; } .preview-note { font-size:10px; text-align:left; }
 .service-explorer { grid-template-columns:.9fr 1.1fr; gap:35px; } .service-choices button { font-size:17px; gap:12px; min-height:66px; } .service-panel h3 { font-size:29px; } .service-panel>p:not(.eyebrow):not(.scope-note) { font-size:15px; } .scope-list { font-size:14px; }
 .learning-grid { gap:30px; grid-template-columns:1fr 1fr; } .learning-copy h2 { font-size:28px; } .learning-copy>p:not(.eyebrow):not(.project-status):not(.scope-note) { font-size:14px; } .about-grid { grid-template-columns:210px 1fr; gap:40px; } .about-photo img { height:330px; } .about-grid h2 { font-size:32px; }
 .contact-grid { gap:32px; } .contact-copy h2 { font-size:36px; } .contact-copy>p:not(.eyebrow):not(.scope-note) { font-size:15px; } .contact-form-card { padding:24px; } .contact-form-card h3 { font-size:23px; } .enquiry-form { grid-template-columns:1fr; gap:16px; } .footer-top { align-items:flex-start; } .footer-links { gap:4px 22px; max-width:360px; } .footer-base { margin-left:24px; margin-right:24px; width:auto; padding-left:0; padding-right:0; }
}
@media(max-width:650px) {
 .shell { padding:0 20px; } html { scroll-padding-top:92px; } .hero { padding:36px 0 38px; } .hero-grid { grid-template-columns:1fr; gap:34px; } .hero h1 { font-size:46px; line-height:1.05; } .hero .eyebrow { font-size:11px; margin-bottom:20px; } .brand-line { width:22px; } .hero-intro { font-size:17px; max-width:35ch; } .hero .actions { gap:20px; } .hero-person p { font-size:12px; } .hero-person img { width:42px; height:42px; } .hero-capture { aspect-ratio:1.65; object-fit:cover; object-position:top; } .hero-caption { font-size:11px; padding:12px; } .hero-caption span:last-child { display:block; }
 .section { padding:48px 0; } .section-heading { display:block; margin-bottom:26px; } .section-heading h2 { font-size:30px; } .section-heading>p { margin-top:16px; } .section-heading>p br { display:none; } .eyebrow { font-size:11px; margin-bottom:16px; }
 .project-explorer { display:flex; flex-direction:column; gap:25px; } .project-sidebar { display:contents; } .project-choices { display:grid; grid-template-columns:1fr; order:0; } .project-choice { padding:13px 14px; min-height:68px; } .project-choice small { font-size:10px; } .project-choice strong { font-size:19px; } .project-preview { order:1; width:100%; } .preview-toolbar { flex-wrap:nowrap; padding:7px 10px; } .project-stage { aspect-ratio:1.44; } .project-stage.is-mobile { aspect-ratio:1; padding:12px; } .project-context { order:2; padding:0; } .project-context h3 { font-size:23px; } .project-context p:not(.eyebrow) { font-size:15px; margin-top:10px; } .project-context .text-link { margin-top:8px; }
 .service-explorer { grid-template-columns:1fr; gap:26px; } .service-choices { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .service-choices button { font-size:14px; line-height:1.35; min-height:62px; border:1px solid var(--line); border-radius:4px; padding:10px 12px; gap:8px; align-items:center; } .service-choices button>span:first-child { display:none; } .service-choices button>span:last-child { font-size:16px; } .service-choices button[aria-pressed=true] { background:#ebe7f4; border-color:var(--accent); } .service-panel h3 { font-size:30px; } .service-panel>p:not(.eyebrow):not(.scope-note) { font-size:16px; margin:18px 0; } .scope-list { font-size:14px; } .section-footnote { font-size:12px; margin-top:28px; padding-top:18px; } .section-footnote a { display:inline-block; margin:8px 0 0; min-height:34px; }
 .learning-grid { grid-template-columns:1fr; gap:28px; } .learning-copy h2 { font-size:30px; } .learning-copy>p:not(.eyebrow):not(.project-status):not(.scope-note) { font-size:16px; } .learning-copy .scope-note { font-size:11px; }
 .about-grid { grid-template-columns:1fr; gap:28px; } .about-photo { width:150px; } .about-photo img { height:185px; } .about-grid h2 { font-size:30px; } .about-grid p:not(.eyebrow) { margin-top:18px; } .credential { gap:12px; } .credential img { width:56px; height:56px; } .credential strong { font-size:12px; } .credential div>a { font-size:11px; min-height:36px; padding-top:6px; }
 .contact-grid { grid-template-columns:1fr; gap:36px; } .contact-copy h2 { font-size:36px; } .contact-copy>p:not(.eyebrow):not(.scope-note) { font-size:16px; max-width:38ch; } .contact-form-card { padding:24px 20px; } .footer-top { display:block; } .footer-links { margin-top:20px; max-width:none; gap:4px 22px; } .footer-base { display:block; line-height:1.8; margin-left:20px; margin-right:20px; } .footer-base>span { display:block; } .analytics-notice { left:8px; right:8px; bottom:8px; padding:18px; } .analytics-notice .p-actions { flex-wrap:wrap; }
}
@media(max-width:400px) { .hero h1 { font-size:42px; } .hero .actions { gap:16px; } .hero .button { padding:12px 14px; } .hero .text-link { font-size:14px; gap:12px; } .device-choices button { padding:5px 8px; } .preview-toolbar>span { max-width:145px; } .service-choices button { padding:10px; font-size:13px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }