:root { --ink:#202624; --muted:#69716d; --accent:#52763a; --line:#e0e4de; --paper:#fff; --dark:#19211d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #86ab63; outline-offset:5px; }
.wrap { width:min(1180px,calc(100% - 112px)); margin-inline:auto; }
.header { width:100%; padding-inline:max(56px,calc((100% - 1180px)/2)); height:102px; background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:space-between; }
.brand img { display:block; width:171px; height:auto; }
.header nav { display:flex; align-items:center; gap:35px; font-size:13px; }
.header nav>a { color:#d7dfd9; }
.header nav>a:hover { color:#fff; }
.nav-cta { border:1px solid #69766c; padding:13px 19px; border-radius:3px; }
.nav-cta span { margin-left:24px; }
.menu-toggle { display:none; }
.hero { padding-top:90px; display:grid; grid-template-columns:1fr 270px; column-gap:70px; }
.eyebrow { font-size:10px; letter-spacing:1.7px; font-weight:600; line-height:1.6; margin:0 0 25px; color:var(--accent); }
.dot { display:none; }
h1 { font-size:clamp(52px,5.7vw,78px); line-height:1.08; font-weight:500; letter-spacing:-3.7px; margin:0; }
.lime { color:var(--accent); }
.serif { font-family:inherit; font-style:normal; }
.intro { color:var(--muted); font-size:16px; line-height:1.8; margin:27px 0 29px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; border:1px solid var(--dark); border-radius:3px; padding:16px 20px; background:var(--dark); color:#fff; font-size:12px; font-weight:500; cursor:pointer; transition:background .2s; }
.button:hover { background:#35503d; }
.button span { font-size:18px; }
.hero-aside { align-self:center; border-top:1px solid #a2b59b; padding-top:21px; margin-top:55px; }
.aside-label { font-size:9px; letter-spacing:1.5px; color:var(--muted); }
.hero-aside p { font-size:22px; letter-spacing:-.5px; line-height:1.5; margin:23px 0 32px; }
.hero-aside a { font-size:11px; color:var(--accent); display:flex; justify-content:space-between; }
.hero-bottom { grid-column:1/-1; margin-top:66px; padding:23px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:9px; letter-spacing:1.1px; }
.hero-bottom a { font-size:11px; letter-spacing:0; }
.hero-bottom a span { margin-left:25px; }
.services { background:#f6f7f4; padding:85px 0; }
h2 { font-size:clamp(34px,3.5vw,46px); line-height:1.15; letter-spacing:-1.8px; font-weight:500; margin:0; }
.section-heading,.approach-top { display:grid; grid-template-columns:1.2fr 1fr; gap:0 80px; }
.section-heading .eyebrow,.approach-top .eyebrow { grid-column:1/-1; }
.section-heading>p:last-child,.approach-top>p:last-child { font-size:14px; color:var(--muted); line-height:1.8; align-self:end; max-width:355px; margin:0; justify-self:end; }
.service-list { margin-top:45px; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.service { border-top:1px solid #ced7c9; padding-top:23px; position:relative; }
.number { font-size:10px; color:#7f8c77; display:block; margin-bottom:29px; }
h3 { font-size:21px; font-weight:500; letter-spacing:-.6px; line-height:1.4; margin:0 0 16px; }
.service p { font-size:13px; line-height:1.85; color:var(--muted); margin:0 0 24px; }
.tags { display:flex; flex-direction:column; gap:10px; font-size:10px; color:#626e5d; }
.tags span:before { content:'—'; margin-right:9px; color:#9ba891; }
.service-symbol { display:none; }
.approach { padding-block:85px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:43px; }
.steps article { border-top:1px solid var(--line); padding-top:21px; }
.steps article>span { color:var(--accent); font-size:9px; letter-spacing:1px; }
.steps h3 { margin-top:25px; font-size:19px; }
.steps p { color:var(--muted); font-size:13px; line-height:1.85; }
.about { background:#f6f7f4; padding:80px 0; }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.about-copy h3 { font-size:23px; max-width:330px; }
.about-copy p { font-size:14px; line-height:1.85; color:var(--muted); }
.text-link { display:inline-flex; align-items:center; gap:26px; font-size:12px; border:0; border-bottom:1px solid #aebda6; background:none; padding:0 0 10px; margin-top:15px; color:var(--accent); cursor:pointer; }
.contact { padding-block:90px; display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.contact-heading>p:not(.eyebrow) { font-size:14px; line-height:1.85; color:var(--muted); margin-top:25px; }
.contact-heading>.text-link { font-size:16px; }
form { padding-top:2px; min-width:0; }
label { display:block; font-size:11px; color:#475148; margin-bottom:21px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
input,select,textarea { display:block; width:100%; background:#fff; border:1px solid #dce1d8; border-radius:3px; padding:12px; margin-top:9px; font-size:12px; line-height:1.6; color:var(--ink); resize:vertical; }
input::placeholder,textarea::placeholder { color:#8a9187; }
.form-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.form-bottom p { color:var(--muted); font-size:9px; line-height:1.8; }
.form-bottom .button { padding:14px 16px; font-size:11px; gap:15px; }
#enquiry-result { margin-top:25px; }
#enquiry-status { color:var(--accent); font-size:12px; line-height:1.7; }
footer.wrap { background:var(--dark); color:#fff; width:100%; padding:29px max(56px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:30px; }
footer .brand img { width:133px; }
footer p { color:#a5b0a8; font-size:11px; }
footer>span,footer>a:last-child { font-size:9px; color:#b7c0b8; }
.skip { position:fixed; top:-100px; z-index:20; padding:15px; background:var(--dark); color:#fff; }
.skip:focus { top:0; }
@media(max-width:1000px) {
.wrap { width:calc(100% - 64px); }
.header { width:100%; padding-inline:32px; }
.hero { grid-template-columns:1fr 210px; gap:35px; }
h1 { font-size:60px; }
.hero-aside p { font-size:19px; }
.section-heading,.approach-top,.about-inner,.contact { gap:40px; }
.service-list { gap:25px; }
.service h3 { font-size:18px; }
footer.wrap { width:100%; padding-inline:32px; }
}
@media(max-width:700px) {
.wrap { width:calc(100% - 40px); }
.header { width:100%; height:84px; padding-inline:20px; }
.brand img { width:148px; }
.menu-toggle { display:flex; gap:18px; border:1px solid #657369; border-radius:3px; background:none; color:#fff; padding:10px 12px; font-size:11px; }
.header nav { display:none; position:absolute; top:84px; left:0; right:0; z-index:10; background:var(--dark); padding:25px 20px; }
.header nav.open { display:flex; flex-direction:column; align-items:stretch; gap:24px; }
.hero { padding-top:55px; display:block; }
h1 { font-size:clamp(42px,10.5vw,64px); letter-spacing:-2px; }
.eyebrow { font-size:9px; margin-bottom:23px; }
.intro { font-size:14px; margin:24px 0; }
.desktop { display:none; }
.hero-aside { margin-top:42px; padding-top:18px; }
.hero-aside p { font-size:19px; margin:16px 0 20px; }
.hero-aside a { max-width:230px; }
.hero-bottom { margin-top:34px; padding-block:20px; font-size:8px; line-height:1.8; }
.hero-bottom a { font-size:9px; white-space:nowrap; }
.hero-bottom a span { margin-left:8px; }
.services,.approach,.about,.contact { padding-block:55px; }
h2 { font-size:35px; letter-spacing:-1.3px; }
.section-heading,.approach-top,.about-inner,.contact { display:grid; grid-template-columns:1fr; gap:0; }
.section-heading>p:last-child,.approach-top>p:last-child { justify-self:start; margin-top:22px; max-width:100%; font-size:13px; }
.service-list,.steps { grid-template-columns:1fr; gap:30px; margin-top:32px; }
.service { padding-top:19px; }
.number { margin-bottom:16px; }
.service h3 { font-size:21px; }
.tags { flex-direction:row; flex-wrap:wrap; gap:10px 16px; }
.steps h3 { margin-top:18px; }
.about-copy { margin-top:30px; }
.about-copy h3 { font-size:21px; }
.contact form { margin-top:35px; }
.form-bottom { align-items:flex-start; flex-direction:column; gap:10px; }
footer.wrap { width:100%; flex-wrap:wrap; padding:28px 20px; gap:22px; }
footer p { width:calc(100% - 160px); font-size:10px; }
footer>span { flex:1; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
/* Refined studio direction */
:root { --ink:#252923; --muted:#73766d; --accent:#606f4c; --paper:#f7f6f1; --line:#ddded4; --dark:#20271f; }
body { background:var(--paper); }
.header { height:96px; }
.header nav { font-size:12px; }
.nav-cta { border-radius:0; }
.hero { grid-template-columns:1fr 295px; gap:30px; padding-top:84px; }
.hero .eyebrow { font-size:9px; letter-spacing:2.2px; margin-bottom:35px; }
h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(47px,5.3vw,77px); letter-spacing:-3.4px; line-height:1.12; font-weight:400; }
h1 em { font-weight:400; color:#687657; }
.hero-aside { border:0; padding:0; align-self:end; margin:0 0 8px; }
.hero-aside p { font-size:14px; line-height:1.8; letter-spacing:0; margin:0 0 23px; color:var(--muted); }
.button { border-radius:0; padding:16px 20px; }
.hero-aside .button { display:flex; color:#fff; font-size:11px; max-width:240px; }
.hero-aside .secondary-link { display:block; margin-top:20px; font-size:10px; color:#6d7365; }
.hero-bottom { margin-top:48px; padding:20px 0; border-top:0; }
.design-feature { padding-bottom:85px; }
.design-stage { position:relative; height:560px; background:#e4e5dc; overflow:hidden; padding:60px 100px 40px 68px; }
.stage-note { position:absolute; left:26px; right:26px; top:20px; display:flex; justify-content:space-between; font-size:7px; letter-spacing:1.5px; color:#6c7564; }
.concept-browser { width:94%; position:relative; background:#f8f5ed; box-shadow:0 25px 50px #29342324; transform:rotate(-2deg); transition:transform .7s; }
.design-stage:hover .concept-browser { transform:rotate(0); }
.browser-bar { height:27px; background:#eff0e9; color:#9b9f93; padding:0 13px; display:flex; align-items:center; justify-content:space-between; font-size:7px; letter-spacing:1px; border-bottom:1px solid #e1e2d8; }
.browser-bar>span:first-child { font-size:6px; letter-spacing:2px; }
.concept-page { padding:23px 33px 16px; }
.concept-nav { display:flex; justify-content:space-between; align-items:center; font-size:8px; }
.concept-wordmark { font-family:Georgia,serif; font-size:29px; letter-spacing:-2px; }
.concept-wordmark>span { font:8px Arial,sans-serif; vertical-align:top; margin-left:4px; }
.concept-content { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:23px; }
.concept-copy { padding-top:14px; }
.concept-eyebrow { font-size:6px; letter-spacing:1.4px; }
.concept-copy>p { font-family:Georgia,serif; font-size:clamp(37px,4vw,58px); line-height:1; letter-spacing:-2px; margin:23px 0 17px; }
.concept-copy em { color:#6f765b; }
.concept-caption { font-size:9px; color:#7c8071; line-height:1.6; }
.concept-discover { display:block; margin-top:25px; padding-top:12px; border-top:1px solid #d6d9cd; max-width:185px; font-size:8px; }
.concept-discover b { float:right; font-size:12px; }
.architecture { height:275px; position:relative; overflow:hidden; background:linear-gradient(145deg,#d5c4a8,#eee1c7 50%,#baa788); }
.architecture:before { content:''; position:absolute; bottom:0; width:100%; height:29%; background:linear-gradient(145deg,#d0bc98,#e6d8bc); }
.arch-wall { position:absolute; width:76%; height:110%; right:-9%; bottom:0; background:linear-gradient(100deg,#f7ead1,#caba9b); border-radius:48% 48% 0 0; box-shadow:-13px 9px 25px #826b4d30; }
.arch-door { position:absolute; width:40%; height:77%; left:42%; bottom:0; border-radius:80px 80px 0 0; background:linear-gradient(100deg,#9b8765,#d2bf9a 28%,#4d5040 29%,#7c8069 85%); box-shadow:8px -4px 15px #9d896e30; }
.arch-shadow { position:absolute; top:-30%; left:-15%; height:180%; width:40%; background:#70694d18; transform:rotate(35deg); filter:blur(3px); }
.arch-plinth { position:absolute; width:39%; height:15%; left:8%; bottom:10%; background:linear-gradient(100deg,#e8d9bc,#c0ad89); box-shadow:15px 15px 20px #5d533b30; }
.arch-sphere { position:absolute; width:56px; height:56px; border-radius:50%; bottom:25%; left:15%; background:radial-gradient(circle at 30% 20%,#e5e4cd,#969b7e 65%,#505b43); box-shadow:8px 9px 12px #574b3430; }
.architecture>span { position:absolute; right:9px; bottom:13px; font-size:6px; color:#ede7d6; writing-mode:vertical-rl; letter-spacing:1.4px; }
.concept-foot { display:flex; justify-content:space-between; font-size:6px; letter-spacing:1.1px; margin-top:23px; color:#8a8c7d; }
.detail-card { position:absolute; right:35px; bottom:27px; width:225px; padding:23px; background:#303b2c; color:#e8ecdd; box-shadow:0 15px 35px #20271f25; transform:rotate(3deg); }
.detail-card>span { font-size:6px; letter-spacing:1px; }
.detail-card>div { font-family:Georgia,serif; font-size:65px; letter-spacing:-4px; line-height:1.2; margin:16px 0; }
.detail-card>div>span { font:26px Arial,sans-serif; float:right; padding-top:10px; color:#b2bba0; }
.detail-card>p { font-size:9px; line-height:1.8; color:#b7c1ac; margin:0; }
.feature-caption { display:grid; grid-template-columns:1fr 1fr; gap:100px; margin-top:36px; align-items:start; }
.feature-caption h2 { font-size:31px; }
h2 { font-weight:400; font-family:Georgia,'Times New Roman',serif; letter-spacing:-1.6px; }
h2 em { font-weight:400; color:#687657; }
.feature-caption>p { margin:0; font-size:13px; color:var(--muted); line-height:1.85; }
.feature-caption small { display:block; margin-top:14px; font-size:9px; color:#858a7a; }
.services { background:#eeefe7; }
.service { transition:transform .3s; }
.service:hover { transform:translateY(-5px); }
.number { font-family:Georgia,serif; font-size:20px; color:#899377; }
.about { background:var(--dark); color:#eef0e6; }
.about .eyebrow { color:#b2bba0; }
.about h2 { font-size:50px; }
.about-copy h3 { font-family:Georgia,serif; font-size:27px; font-weight:400; letter-spacing:-.6px; }
.about-copy p { color:#b4bcae; }
.about .text-link { color:#d1d9c5; }
.contact h2 { font-size:53px; }
input,select,textarea { border-radius:0; background:#fbfaf7; }
footer.wrap { border-top:1px solid #414b3a; }
@keyframes enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.hero-copy,.hero-aside { animation:enter .7s ease-out both; }
.hero-aside { animation-delay:.12s; }
@media(max-width:1000px) {
.hero { grid-template-columns:1fr 230px; gap:20px; }
h1 { font-size:53px; letter-spacing:-2.5px; }
.design-stage { height:490px; padding:60px 65px 40px 40px; }
.concept-browser { width:100%; }
.concept-page { padding:20px 24px 15px; }
.architecture { height:250px; }
.detail-card { width:185px; right:20px; bottom:20px; padding:18px; }
.feature-caption { gap:50px; }
}
@media(max-width:700px) {
.hero { display:block; padding-top:49px; }
.hero .eyebrow { font-size:8px; letter-spacing:1.5px; margin-bottom:25px; }
h1 { font-size:clamp(37px,9vw,60px); letter-spacing:-1.9px; line-height:1.15; }
.hero-aside { margin-top:28px; }
.hero-aside p { font-size:13px; margin-bottom:18px; }
.hero-aside .button { max-width:222px; }
.hero-aside .secondary-link { margin-top:17px; }
.hero-bottom { margin-top:25px; padding:15px 0; font-size:7px; }
.design-feature { padding-bottom:55px; }
.design-stage { height:355px; padding:48px 14px 40px; }
.stage-note { left:14px; right:14px; font-size:5px; letter-spacing:.5px; }
.concept-browser { transform:rotate(-2deg); width:100%; }
.browser-bar { height:18px; font-size:4px; padding-inline:7px; }
.browser-bar>span:first-child { font-size:4px; }
.concept-page { padding:13px 14px 12px; }
.concept-wordmark { font-size:20px; }
.concept-nav>span:last-child { font-size:5px; }
.concept-content { gap:8px; margin-top:15px; }
.concept-copy { padding-top:5px; }
.concept-eyebrow { font-size:4px; letter-spacing:.6px; }
.concept-copy>p { font-size:29px; letter-spacing:-1px; margin:15px 0 12px; }
.concept-caption { font-size:6px; }
.concept-discover { font-size:5px; margin-top:14px; padding-top:8px; }
.architecture { height:175px; }
.arch-sphere { width:32px; height:32px; }
.architecture>span { font-size:4px; }
.concept-foot { margin-top:14px; font-size:4px; }
.detail-card { width:130px; bottom:12px; right:12px; padding:13px; }
.detail-card>span { font-size:4px; }
.detail-card>div { font-size:39px; margin:8px 0; }
.detail-card>div>span { font-size:17px; }
.detail-card>p { font-size:6px; }
.feature-caption { grid-template-columns:1fr; gap:20px; margin-top:27px; }
.feature-caption h2 { font-size:31px; }
.feature-caption>p { font-size:12px; }
.about h2,.contact h2 { font-size:39px; }
}
@media(prefers-reduced-motion:reduce) { .hero-copy,.hero-aside { animation:none; } .design-stage:hover .concept-browser { transform:rotate(-2deg); } .service:hover { transform:none; } }
/* Engineering-first presentation */
.header { gap:24px; }
.header-controls { display:flex; gap:12px; align-items:center; margin-left:auto; order:2; }
.header nav { gap:24px; }
.language-toggle { min-width:44px; min-height:44px; border:1px solid #71816b; background:transparent; color:#fff; font-size:12px; cursor:pointer; }
.hero { grid-template-columns:1.6fr 1fr; gap:45px; padding-top:80px; }
.hero h1 { font-size:clamp(45px,5.2vw,74px); }
.hero-aside p { font-size:15px; max-width:340px; }
.hero-bottom { font-size:10px; }
.engineering-showcase { padding-bottom:90px; }
.showcase-top { display:grid; grid-template-columns:1.2fr 1fr; gap:90px; align-items:end; margin:22px 0 37px; }
.showcase-top h2 { font-size:38px; }
.showcase-top h2 em,.outcomes h2 em,.approach h2 em,.faq h2 em { color:#64744f; font-weight:400; }
.showcase-top>p { font-size:14px; color:#656d5e; line-height:1.85; margin:0; max-width:390px; }
.system-console { background:#1c251f; color:#f0f2e9; border:1px solid #45563d; box-shadow:0 22px 50px #1f2d1e12; }
.console-bar { display:flex; gap:10px; align-items:center; padding:20px 27px; border-bottom:1px solid #3b4834; font:10px Consolas,monospace; letter-spacing:1px; color:#b9c6ac; }
.console-indicator { width:6px; height:6px; border-radius:50%; background:#bdd59e; }
.console-caption { margin-left:auto; color:#a7b29c; font-size:9px; }
.console-inner { display:grid; grid-template-columns:32% 1fr; min-height:360px; }
.layer-buttons { padding:30px 24px; border-right:1px solid #3b4834; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.layer-button { width:100%; display:flex; text-align:left; align-items:center; gap:14px; padding:19px 13px; font-size:13px; background:transparent; border:1px solid transparent; color:#b4c1a8; cursor:pointer; transition:background .2s,border-color .2s; }
.layer-button>span:first-child { font:10px Consolas,monospace; color:#a6b89a; }
.layer-button>span:last-child { margin-left:auto; }
.layer-button:hover { background:#293628; }
.layer-button.active { background:#34472e; border-color:#688358; color:#fff; }
.layer-detail { padding:37px 43px; }
.layer-detail .eyebrow { color:#b6cba0; font-size:9px; margin-bottom:20px; }
.layer-detail h3 { font:37px/1.15 Georgia,serif; letter-spacing:-1px; max-width:470px; margin-bottom:22px; }
.layer-detail>p:not(.eyebrow) { font-size:13px; line-height:1.8; color:#c0cbb7; max-width:500px; min-height:72px; }
.layer-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:23px; }
.layer-tags span { padding:7px 10px; border:1px solid #506345; color:#ced8c3; font-size:10px; }
.system-diagram { display:flex; align-items:center; gap:10px; margin-top:30px; color:#a8b799; font:8px Consolas,monospace; letter-spacing:.6px; flex-wrap:wrap; }
.system-diagram i { color:#7d9669; }
.console-bottom { display:flex; justify-content:space-between; gap:20px; padding:18px 27px; border-top:1px solid #3b4834; font:8px/1.7 Consolas,monospace; letter-spacing:.7px; color:#acb89e; }
.service-list { row-gap:47px; }
.service p { font-size:14px; }
.service h3 { font-size:21px; }
.tags { font-size:11px; }
.outcomes { padding-block:85px; border-bottom:1px solid var(--line); }
.outcome-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.outcome-grid article { border-top:1px solid var(--line); padding:23px 0; }
.outcome-grid article:first-child { padding-top:0; border:0; }
.outcome-grid h3 { font-size:20px; }
.outcome-grid p { margin:0; color:#636c5d; font-size:14px; line-height:1.85; }
.quality-strip { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; border-top:1px solid var(--line); margin-top:35px; padding-top:27px; font-size:11px; color:#5f6c52; }
.quality-strip span:before { content:'✓'; margin-right:9px; }
.faq { padding-block:80px; display:grid; grid-template-columns:1fr 1.3fr; gap:80px; border-bottom:1px solid var(--line); }
.faq details { border-top:1px solid #cfd5c7; }
.faq details:last-child { border-bottom:1px solid #cfd5c7; }
.faq summary { padding:24px 30px 24px 0; font-size:15px; line-height:1.5; cursor:pointer; position:relative; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:'+'; position:absolute; right:0; font-size:20px; color:#64744f; }
.faq details[open] summary:after { content:'−'; }
.faq details p { margin:0 0 25px; color:#626c5a; font-size:14px; line-height:1.85; }
input,select,textarea { font-size:14px; }
label { font-size:12px; }
.button,.text-link,.menu-toggle { min-height:44px; touch-action:manipulation; }
.header nav a { display:flex; align-items:center; min-height:44px; }
.header nav a>span { margin-left:20px; }
.eyebrow { color:#576c42; }
.about .eyebrow { color:#c7d5b8; }
@media(max-width:1100px) { .header nav { gap:16px; font-size:11px; } .header { gap:15px; } .brand img { width:148px; } .hero { gap:25px; } .hero h1 { font-size:53px; } .layer-button { font-size:11px; gap:8px; } .layer-detail { padding:32px; } }
@media(max-width:800px) and (min-width:701px) { .header nav { gap:10px; font-size:10px; } .nav-cta { padding:10px; } .brand img { width:120px; } .header { padding-inline:24px; } }
@media(max-width:700px) {
.header { height:84px; }
.header-controls { gap:8px; }
.hero { display:block; padding-top:49px; }
.hero h1 { font-size:clamp(36px,9vw,59px); }
.hero .eyebrow { font-size:8px; }
.hero-aside p { font-size:14px; }
.hero-bottom { font-size:7px; }
.hero-bottom a { font-size:9px; }
.engineering-showcase { padding-bottom:55px; }
.showcase-top { grid-template-columns:1fr; gap:23px; margin-top:30px; }
.showcase-top h2 { font-size:34px; }
.showcase-top>p { font-size:13px; }
.console-bar { padding:16px; font-size:8px; }
.console-caption { font-size:6px; letter-spacing:0; }
.console-inner { display:block; }
.layer-buttons { display:grid; grid-template-columns:1fr 1fr; padding:15px; gap:7px; border-right:0; border-bottom:1px solid #3b4834; }
.layer-button { padding:13px 9px; font-size:10px; min-height:58px; gap:6px; }
.layer-button>span:first-child { font-size:8px; }
.layer-button>span:last-child { display:none; }
.layer-detail { padding:27px 21px; min-height:380px; }
.layer-detail h3 { font-size:31px; }
.layer-detail>p:not(.eyebrow) { min-height:115px; }
.console-bottom { padding:16px; font-size:7px; }
.console-bottom>span:last-child { display:none; }
.outcomes { padding-block:55px; }
.outcome-grid { grid-template-columns:1fr; gap:33px; }
.faq { grid-template-columns:1fr; gap:33px; padding-block:55px; }
.faq summary { font-size:14px; }
.quality-strip { font-size:10px; justify-content:flex-start; gap:17px; }
input,select,textarea { font-size:16px; }
.form-row { grid-template-columns:1fr; gap:0; }
}
/* Fresh blue identity */
:root { --ink:#172b45; --muted:#52647b; --accent:#175db5; --paper:#fff; --line:#dce5ef; --dark:#102c50; }
body { background:#fff; }
.header { background:#fff; color:#172b45; border-bottom:1px solid #e5ebf2; }
.brand { position:relative; display:block; flex-shrink:0; }
.brand:after { content:''; position:absolute; inset:0; background:#1264bd; mask:url('assets/logo.png') center/contain no-repeat; -webkit-mask:url('assets/logo.png') center/contain no-repeat; pointer-events:none; }
.brand img { opacity:0; }
.header nav>a { color:#455970; }
.header nav>a:hover { color:#125bb4; }
.header .nav-cta { border-color:#c6d6e9; color:#145db5; }
.language-toggle,.menu-toggle { color:#175db5; border-color:#c6d6e9; }
.hero h1 em,h2 em,.showcase-top h2 em,.outcomes h2 em,.approach h2 em,.faq h2 em { color:#186ac5; }
.hero .eyebrow,.eyebrow { color:#175aab; }
.hero-aside p,.showcase-top>p,.feature-caption>p { color:#52647b; }
.hero-aside .secondary-link,.hero-bottom { color:#50627a; }
.button { background:#1263c0; border-color:#1263c0; color:#fff; border-radius:5px; }
.button:hover { background:#084b9c; }
.engineering-showcase { position:relative; }
.system-console { background:linear-gradient(120deg,#102b4d,#122f55); border:1px solid #284e7b; border-radius:10px; overflow:hidden; box-shadow:0 25px 55px #164d8d14; }
.console-bar { border-color:#35557c; color:#d0def0; }
.console-indicator { background:#80c9ff; }
.console-caption { color:#a7c3e5; }
.layer-buttons { border-color:#35557c; }
.layer-button { color:#d1dff0; border-radius:5px; }
.layer-button>span:first-child { color:#9fc4ef; }
.layer-button:hover { background:#1c416e; }
.layer-button.active { background:#234f83; border-color:#6199de; }
.layer-detail .eyebrow { color:#9dcaff; }
.layer-detail>p:not(.eyebrow) { color:#cfdef1; }
.layer-tags span { border-color:#466c9b; color:#d7e7fa; border-radius:4px; }
.system-diagram { color:#b8d5f8; }
.system-diagram i { color:#7ab9ff; }
.console-bottom { border-color:#35557c; color:#b7d1ef; }
.services { background:#f3f7fc; }
.service { border-color:#cbd9e9; }
.service p,.outcome-grid p,.steps p,.section-heading>p:last-child,.approach-top>p:last-child,.faq details p { color:#52647b; }
.number { color:#2368b6; }
.tags { color:#445f80; }
.tags span:before { color:#5e8cc3; }
.steps article>span,.quality-strip { color:#175aab; }
.about { background:#eff5fc; color:#172b45; }
.about .eyebrow { color:#175aab; }
.about-copy p { color:#52647b; }
.about .text-link,.text-link { color:#175db5; border-color:#a6c3e7; }
.faq details { border-color:#d0ddec; }
.faq summary:after { color:#175db5; }
.contact-heading>p:not(.eyebrow) { color:#52647b; }
input,select,textarea { background:#fbfdff; border-color:#cbd8e8; color:#172b45; border-radius:5px; }
input::placeholder,textarea::placeholder { color:#64758c; }
label { color:#344c69; }
footer.wrap { background:#f3f7fc; color:#172b45; border-color:#d5e2f1; }
footer p,footer>span,footer>a:last-child { color:#52647b; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #2775d4; outline-offset:4px; }
#enquiry-status { color:#175db5; }
@media(max-width:700px) { .header nav { background:#fff; border-bottom:1px solid #dce5ef; } .header { height:84px; } }
@media(max-width:380px) { .header .brand img { width:118px; } .header { gap:8px; } .menu-toggle { gap:8px; padding:10px; } .header-controls { gap:6px; } .hero h1 { font-size:34px; } .hero-bottom { flex-direction:column; gap:8px; } .console-bar { gap:6px; } .console-caption { max-width:92px; text-align:right; } .layer-button { font-size:9px; } }
/* Original logo, presented on blue */
.header { background:#125aab; color:#fff; border-bottom:1px solid #125aab; }
.brand:after { display:none; }
.brand img { opacity:1; }
.header nav>a { color:#eef5ff; }
.header nav>a:hover { color:#fff; }
.header .nav-cta { color:#fff; border-color:#82b0e3; }
.language-toggle,.menu-toggle { color:#fff; border-color:#82b0e3; }
footer.wrap { background:#125aab; border-color:#125aab; color:#fff; }
footer p,footer>span,footer>a:last-child { color:#e6effb; }
.header a:focus-visible,.header button:focus-visible,footer a:focus-visible { outline-color:#fff; }
@media(max-width:700px) { .header nav { background:#125aab; border-bottom-color:#82b0e3; } }
/* Engineering hero photography */
.hero { grid-template-columns:1.05fr 1fr; align-items:center; gap:42px; padding-top:65px; }
.hero h1 { font-size:clamp(44px,4.7vw,67px); line-height:1.1; letter-spacing:-2.6px; }
.hero-copy .hero-aside { margin-top:28px; }
.hero-copy .hero-aside p { max-width:460px; }
.hero-photo { margin:0; min-width:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.hero-photo img { display:block; width:100%; height:360px; object-fit:cover; object-position:55% center; border-radius:7px; background:#edf3fa; }
.hero-photo figcaption { display:flex; justify-content:space-between; gap:15px; padding-top:15px; font:8px/1.7 Consolas,monospace; letter-spacing:1px; color:#59718d; }
.hero-bottom { margin-top:0; }
@media(min-width:1101px) { .hero-photo img { height:410px; } }
@media(max-width:1000px) { .hero { gap:28px; } .hero h1 { font-size:46px; } .hero-photo img { height:355px; } }
@media(max-width:700px) { .hero { display:flex; flex-direction:column; align-items:stretch; padding-top:45px; gap:30px; } .hero h1 { font-size:clamp(39px,10vw,58px); letter-spacing:-1.8px; } .hero-copy .hero-aside { margin-top:23px; } .hero-photo img { height:auto; aspect-ratio:1.35; } .hero-photo figcaption { font-size:7px; } .hero-bottom { margin-top:0; } }
/* Interactive, code-native hero */
.hero-system { align-self:center; min-width:0; border:1px solid #d8e5f6; border-radius:15px; background:radial-gradient(ellipse at 50% 40%,#e7f2ff,#f8fbff 72%); box-shadow:0 20px 60px #1b65be0b; position:relative; overflow:hidden; }
.hero-system-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid #e0eaf7; font:8px/1.6 Consolas,monospace; letter-spacing:1px; color:#446b9b; }
.motion-toggle { border:0; background:transparent; color:#446b9b; font-size:9px; min-height:32px; cursor:pointer; padding:4px; letter-spacing:0; }
.motion-toggle:hover { color:#105fb9; }
.architecture-map { height:330px; position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:48px 80px; padding:34px 28px; }
.connection-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.connection-lines path { fill:none; stroke:#b5d2f4; stroke-width:1.2; }
.signal { fill:#1972d4; filter:drop-shadow(0 0 4px #4399ee); }
.system-node { border:1px solid #d3e1f2; border-radius:9px; background:#ffffffed; box-shadow:0 6px 18px #2466ad08; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:16px; gap:8px; position:relative; z-index:1; color:#294a72; cursor:pointer; text-align:left; min-width:0; transition:transform .25s,box-shadow .25s,border-color .25s,background .25s; }
.system-node strong { font-size:12px; font-weight:500; line-height:1.4; }
.system-node small { font:7px/1.6 Consolas,monospace; letter-spacing:.4px; color:#5e7797; }
.node-icon { color:#2374ca; font-size:23px; line-height:1; }
.system-node:hover { transform:translateY(-4px); border-color:#8eb8eb; box-shadow:0 12px 24px #2466ad14; }
.system-node.selected { border-color:#3280d9; background:#edf5ff; box-shadow:0 0 0 3px #2f7dd610; }
.map-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid #c6dcf6; background:#fff; border-radius:50%; width:50px; height:50px; display:flex; align-items:center; justify-content:center; color:#1c64b5; font:italic 20px Georgia,serif; box-shadow:0 0 0 9px #edf5ff; }
.map-center>span { font:12px Arial,sans-serif; margin-left:2px; }
.hero-system-bottom { padding:18px 22px; border-top:1px solid #dfeaf7; background:#ffffffb0; }
.system-hint { color:#5a7494; font:7px Consolas,monospace; letter-spacing:1px; }
.hero-system-bottom p { color:#234d7b; font-size:12px; line-height:1.6; margin:9px 0 0; min-height:20px; }
.hero-copy .hero-aside .button { max-width:250px; }
.button { transition:background .2s,box-shadow .2s,transform .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 7px 18px #125aab26; }
.button>span { transition:transform .2s; }
.button:hover>span { transform:translate(3px,-2px); }
.header nav>a { position:relative; }
.header nav>a:not(.nav-cta):after { content:''; position:absolute; bottom:4px; left:0; right:0; height:1px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.header nav>a:hover:after,.header nav>a[aria-current]:after { transform:scaleX(1); }
.service { border-radius:8px; padding:24px 18px 18px; margin-inline:-18px; transition:background .25s,box-shadow .25s,transform .25s; }
.service:hover { background:#fff; box-shadow:0 12px 30px #164f9210; transform:translateY(-4px); }
.layer-detail { transition:background .25s; }
.layer-button { transition:background .25s,border-color .25s,transform .25s; }
.layer-button:hover { transform:translateX(3px); }
.faq details[open]>p { animation:detail-enter .25s ease-out; }
@keyframes detail-enter { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
.reveal-ready { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.3,1); }
.reveal-ready.is-visible { opacity:1; transform:translateY(0); }
.motion-paused .reveal-ready { opacity:1; transform:none; }
.motion-paused *, .motion-paused *:before, .motion-paused *:after { animation:none!important; transition:none!important; }
.motion-paused .button:hover,.motion-paused .service:hover,.motion-paused .system-node:hover,.motion-paused .layer-button:hover { transform:none; }
@media(max-width:1000px) { .architecture-map { gap:40px 44px; padding:30px 19px; height:340px; } .system-node { padding:13px; } .system-node strong { font-size:11px; } .hero-system-top { padding:12px 15px; font-size:7px; } .system-node small { font-size:6px; } }
@media(max-width:700px) { .hero-system { width:100%; } .architecture-map { height:325px; gap:40px 56px; padding:27px 20px; } .hero-system-top { font-size:7px; } .system-node strong { font-size:11px; } .system-node small { font-size:6px; } .hero-system-bottom p { min-height:38px; } .service { margin-inline:0; padding-inline:0; } .service:hover { box-shadow:none; background:transparent; } }
@media(prefers-reduced-motion:reduce) { .reveal-ready { opacity:1; transform:none; } .button:hover,.system-node:hover,.service:hover,.layer-button:hover,.button:hover>span { transform:none; } .faq details[open]>p { animation:none; } }
/* Project studio and editorial interaction */
.header { position:sticky; top:0; z-index:30; transition:box-shadow .25s; }
.header.scrolled { box-shadow:0 4px 24px #10376821; }
html { scroll-padding-top:125px; }
section[id] { scroll-margin-top:125px; }
.reading-progress { position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; background:#a8dcff; z-index:40; pointer-events:none; }
.hero { padding-top:64px; padding-bottom:12px; }
.hero-edition { display:block; color:#54749a; font:8px Consolas,monospace; letter-spacing:1.6px; margin-bottom:19px; }
.hero .eyebrow { margin-bottom:24px; }
.hero-system { background:radial-gradient(ellipse at 50% 20%,#deedff,#f8fbff 75%); }
.architecture-map:before { content:''; position:absolute; inset:0; background-image:radial-gradient(#79a6db44 .7px,transparent .7px); background-size:16px 16px; mask-image:radial-gradient(ellipse,#000,transparent 75%); }
.system-node { backdrop-filter:blur(6px); }
.map-center { animation:hub-breathe 4s ease-in-out infinite; }
@keyframes hub-breathe { 0%,100% { box-shadow:0 0 0 8px #edf5ff; } 50% { box-shadow:0 0 0 15px #dcecff66; } }
.project-studio { padding-block:90px; display:grid; grid-template-columns:.85fr 1.3fr; gap:85px; }
.studio-intro>p:last-child { color:#52647b; font-size:14px; line-height:1.85; max-width:290px; margin-top:25px; }
.studio-workspace { border:1px solid #d9e5f5; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 20px 55px #1b65be08; }
.goal-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; background:#f3f7fd; padding:16px; border-bottom:1px solid #d9e5f5; }
.goal-options button { display:flex; text-align:left; align-items:center; gap:9px; background:#fff; border:1px solid #d9e5f5; border-radius:5px; color:#425d7f; font-size:11px; padding:16px 12px; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.goal-options button>span:first-child { font:9px Consolas,monospace; color:#6b8cb7; }
.goal-options button>span:last-child { margin-left:auto; }
.goal-options button:hover { border-color:#78a9e0; }
.goal-options button.chosen { background:#125fb8; color:#fff; border-color:#125fb8; }
.goal-options button.chosen>span { color:#d8eaff; }
.goal-result { padding:30px; }
.recommendation-label { font:8px Consolas,monospace; letter-spacing:1px; color:#4b709f; }
.goal-result h3 { font:30px/1.18 Georgia,serif; color:#173b68; letter-spacing:-.8px; margin:20px 0 17px; min-height:72px; }
.goal-result>p { font-size:13px; line-height:1.85; color:#52647b; min-height:96px; }
.goal-result ol { list-style:none; counter-reset:goal; padding:0; margin:24px 0 29px; display:grid; gap:13px; }
.goal-result li { counter-increment:goal; color:#3a577c; font-size:12px; display:flex; align-items:center; gap:12px; }
.goal-result li:before { content:'0' counter(goal); color:#236ac0; font:9px Consolas,monospace; width:25px; height:25px; border-radius:50%; background:#edf4fd; display:grid; place-items:center; }
.goal-result small { display:block; color:#617590; font-size:9px; line-height:1.8; margin-top:17px; }
.service { display:flex; flex-direction:column; align-items:flex-start; }
.service-action { margin-top:auto; padding:22px 0 8px; display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; border:0; background:none; font-size:11px; color:#165fb6; cursor:pointer; text-align:left; min-height:44px; }
.service-action>span { transition:transform .2s; }
.service-action:hover>span { transform:translate(3px,-3px); }
.service .tags { margin-bottom:12px; }
.outcomes { padding-top:35px; }
.goal-options button:focus-visible,.service-action:focus-visible { outline:3px solid #2775d4; outline-offset:3px; }
@media(max-width:1000px) { .project-studio { gap:40px; grid-template-columns:.8fr 1.2fr; } .goal-options { padding:12px; gap:7px; } .goal-options button { font-size:10px; padding:13px 10px; gap:7px; } .goal-result { padding:25px; } }
@media(max-width:700px) { html { scroll-padding-top:105px; } section[id] { scroll-margin-top:105px; } .header nav { top:84px; } .hero { padding-top:38px; } .hero-edition { font-size:7px; margin-bottom:14px; } .project-studio { grid-template-columns:1fr; gap:27px; padding-block:55px; } .studio-intro>p:last-child { max-width:100%; } .goal-result h3 { font-size:27px; min-height:0; } .goal-result>p { min-height:0; } .goal-result { padding:23px; } .goal-options button { font-size:10px; min-height:65px; } .goal-options button>span:last-child { display:none; } .outcomes { padding-top:15px; } }
@media(prefers-reduced-motion:reduce) { .map-center { animation:none; } }