@import url("fonts.css");
:root{--blue:#1515ff;--orange:#ee9200;--ink:#1c1c1c}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Lato,Arial,sans-serif;background:#eaf5f5 url("pastel-original.jpg") center/cover fixed}a{color:#1414c9}a:focus-visible{outline:3px solid #2424ff;outline-offset:5px}.skip{position:absolute;top:-80px;background:white;padding:15px;z-index:10}.skip:focus{top:10px}.wrap{max-width:1200px;width:calc(100% - 64px);margin:auto}.masthead{background:#f0eee8 url("header-original.jpg") center/cover;min-height:440px;display:flex;align-items:center}.identity{display:grid;grid-template-columns:365px 1fr;align-items:start;gap:90px;padding:45px 0 55px}.fish{display:block;width:365px;max-width:100%;height:auto}.title{color:var(--blue);font-family:Caveat,'Segoe Print',cursive;font-size:clamp(55px,5.6vw,90px);font-weight:700;line-height:1.1;text-align:center;margin:6px 0 0}.title span{display:block}.navigation{background:rgba(255,255,255,.65);border-bottom:1px solid rgba(50,85,125,.14)}nav{display:flex;justify-content:center;gap:45px;padding:17px 10px}nav a{font-size:18px;text-decoration:none}nav a[aria-current=page]{font-weight:700;text-decoration:underline;text-underline-offset:6px}.magic{font-size:44px;line-height:1.2;color:var(--orange);font-style:italic;text-align:center;margin:0;padding:30px 15px;font-weight:700;background:rgba(255,255,255,.15)}.intro{font-size:24px;line-height:1.65;padding:28px 0 36px}.intro p{margin:0 0 17px}.intro p:last-child{margin-bottom:0}.directions{display:grid;grid-template-columns:1fr 1fr;gap:35px;padding:0 0 55px}.direction{background:rgba(255,255,255,.58);border:1px solid rgba(66,92,130,.18);padding:25px 32px 32px;text-decoration:none;color:var(--ink);border-radius:4px}.direction:hover{background:rgba(255,255,255,.88)}.direction h2{font:700 58px/1.1 Caveat,'Segoe Print',cursive;color:var(--blue);margin:0 0 16px}.direction p{font-size:21px;line-height:1.6;margin:0 0 25px}.direction .go{font-size:20px;color:#1717cd;text-decoration:underline;text-underline-offset:5px}.content{padding:30px 0 50px;font-size:24px;line-height:1.65}.content p{margin:0 0 20px}.contact{padding:30px 0 45px;border-top:1px solid rgba(70,100,130,.2);font-size:20px;line-height:1.7}.contact h2{font-size:26px;color:#1919c9;margin:0 0 12px}.contact p{margin:4px 0}.footer{background:rgba(255,255,255,.38);padding:22px 0;font-size:15px;color:#3f4650}.footer .wrap{display:flex;justify-content:space-between;gap:20px}.status{background:rgba(255,255,255,.52);padding:25px 30px;border-left:4px solid var(--orange);margin:25px 0}.back{display:inline-block;margin-top:15px;font-size:19px}@media(max-width:850px){.identity{grid-template-columns:280px 1fr;gap:30px}.fish{width:280px}.masthead{min-height:340px}.title{font-size:62px}.intro,.content{font-size:21px}.directions{gap:20px}.direction{padding:25px}.direction h2{font-size:50px}}@media(max-width:600px){.wrap{width:calc(100% - 36px)}.identity{display:flex;flex-direction:column;align-items:center;gap:24px;padding:30px 0}.fish{width:230px}.title{font-size:52px;margin:0}.masthead{min-height:0}.magic{font-size:34px;padding:25px 12px}nav{gap:25px}nav a{font-size:16px}.intro,.content{font-size:19px;padding-top:25px}.directions{grid-template-columns:1fr;gap:20px;padding-bottom:35px}.direction p{font-size:19px}.footer .wrap{flex-direction:column;gap:8px}.contact{font-size:18px}}

/* Refined original-style hero and fuller landing summaries. */
.masthead{min-height:370px}.identity{grid-template-columns:300px minmax(0,1fr);align-items:center;gap:60px;padding:32px 0}.fish{width:300px}.title{font-size:clamp(58px,6vw,94px);line-height:1.08;margin:0}.title>span{white-space:nowrap}.title .hero-subtitle{font-family:Lato,Arial,sans-serif;font-size:25px;font-weight:400;line-height:1.4;letter-spacing:.015em;margin-top:16px;color:var(--blue)}.directions{padding-top:8px;gap:30px}.direction{display:flex;flex-direction:column;padding:28px 32px 32px;background:rgba(255,255,255,.43)}.direction p{font-size:21px;line-height:1.6;margin-bottom:18px}.direction .go{margin-top:auto;padding-top:10px}.magic{padding:25px 15px}.contact{display:grid;grid-template-columns:1fr 1.5fr 2fr;column-gap:30px}.contact h2{grid-column:1/-1}.contact p{font-size:18px}.footer{margin-top:0}
@media(max-width:1000px){.identity{grid-template-columns:260px minmax(0,1fr);gap:30px}.fish{width:260px}.title{font-size:clamp(45px,6.5vw,75px)}.title .hero-subtitle{font-size:21px}.masthead{min-height:325px}.direction p{font-size:19px}.contact{display:block}}
@media(max-width:650px){.identity{display:flex;gap:20px;padding:25px 0}.fish{width:220px}.title{font-size:clamp(43px,9.5vw,62px)}.title .hero-subtitle{font-size:20px;margin-top:10px}.directions{grid-template-columns:1fr;gap:22px}.direction{padding:24px}.direction p{font-size:19px}.masthead{min-height:0}.magic{font-size:34px;padding:24px 12px}.contact{display:block}}

/* Give the subtitle a clear visual weight within the original banner. */
.title{position:relative;isolation:isolate;padding:16px 12px}
.title::before{content:"";position:absolute;inset:-18px -20px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,255,255,.68) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 74%)}
.title .hero-subtitle{font-family:Lato,Arial,sans-serif;font-size:38px;font-weight:700;line-height:1.3;letter-spacing:.015em;margin-top:20px;color:#1515bb;white-space:normal}
@media(max-width:1000px){.title .hero-subtitle{font-size:30px}}
@media(max-width:650px){.title{padding:12px 8px}.title .hero-subtitle{font-size:28px;margin-top:18px}.title::before{inset:-12px -8px}}

:is(.engineering-content,.design-content) h2{font-family:Caveat,'Segoe Print',cursive;font-size:46px;line-height:1.15;color:#1515bb;margin:0 0 20px}:is(.engineering-content,.design-content) p{font-size:21px;line-height:1.65}:is(.engineering-content,.design-content) :is(.engineering-lead,.design-lead){font-size:25px}:is(.engineering-services,.design-services){display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:35px 0}:is(.engineering-services,.design-services) section{padding:28px;background:rgba(255,255,255,.43);border:1px solid rgba(66,92,130,.18);border-radius:4px}:is(.engineering-services,.design-services) p:last-child{margin-bottom:0}.project-example{background:rgba(255,255,255,.4);border-left:4px solid #ee9200;padding:30px 35px;margin:35px 0}.project-links{display:flex;gap:25px;flex-wrap:wrap;font-size:20px}.project-links a{text-underline-offset:5px}:is(.engineering-close,.design-close){margin:40px 0 20px}@media(max-width:750px){:is(.engineering-services,.design-services){grid-template-columns:1fr;gap:20px}:is(.engineering-content,.design-content) h2{font-size:38px}:is(.engineering-content,.design-content) p{font-size:19px}:is(.engineering-content,.design-content) :is(.engineering-lead,.design-lead){font-size:22px}:is(.engineering-services,.design-services) section,.project-example{padding:24px}}

/* Rounded, raised introduction in the Screaming Yellow Fish palette. */
:is(.engineering-content,.design-content) :is(.engineering-lead,.design-lead){padding:25px 32px;margin:5px 0 34px;border:1px solid rgba(96,140,173,.42);border-radius:34px;background:linear-gradient(120deg,rgba(255,255,255,.88),rgba(224,248,248,.86) 65%,rgba(255,243,211,.85));box-shadow:0 7px 18px rgba(39,76,101,.17),inset 0 1px 0 rgba(255,255,255,.95);font-size:25px;line-height:1.65}
nav a{display:inline-flex;align-items:center;justify-content:center;gap:9px}nav .nav-icon{width:21px;height:21px;flex:0 0 21px}nav a[aria-current=page]{text-decoration:none}nav a[aria-current=page] span{text-decoration:underline;text-underline-offset:6px}
@media(max-width:650px){:is(.engineering-content,.design-content) :is(.engineering-lead,.design-lead){font-size:21px;padding:22px 24px;border-radius:28px}nav{gap:22px}nav a{gap:6px}nav .nav-icon{width:19px;height:19px;flex-basis:19px}}
@media(max-width:380px){nav{gap:14px}nav a{font-size:14px}}

/* About menu, shared across the site. */
nav{align-items:center;flex-wrap:wrap;position:relative;z-index:5}.nav-dropdown{position:relative;font-size:18px}.nav-dropdown summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:#1414c9;padding:5px 10px;border:1px solid rgba(45,65,185,.4);border-radius:5px}.nav-dropdown summary::-webkit-details-marker{display:none}.nav-dropdown summary:focus-visible{outline:3px solid #2424ff;outline-offset:4px}.nav-dropdown[open] summary{background:rgba(255,255,255,.8)}.chevron{font-size:12px}.dropdown-menu{position:absolute;right:0;top:calc(100% + 10px);width:280px;background:#f4faf8;border:1px solid #aac0ca;border-radius:16px;padding:10px;box-shadow:0 9px 22px rgba(30,65,90,.22);z-index:20}.dropdown-menu a{display:flex;justify-content:flex-start;padding:13px 14px;border-radius:8px;font-size:17px;line-height:1.4}.dropdown-menu a:hover,.dropdown-menu a:focus-visible{background:#e3efef}.dropdown-menu a[aria-current=page],.section-current{font-weight:700}.about-content{max-width:1050px}.about-content h2{font:700 45px/1.2 Caveat,'Segoe Print',cursive;color:#1515bb;margin:32px 0 15px}.about-links{display:flex;gap:25px;flex-wrap:wrap;font-size:20px;margin-top:30px}.contact-intro{padding-bottom:10px}.contact-page{margin-bottom:35px;padding:28px 30px;background:rgba(255,255,255,.5);border:1px solid rgba(96,140,173,.35);border-radius:24px;box-shadow:0 6px 16px rgba(39,76,101,.1)}
@media(max-width:650px){nav{gap:14px;padding:12px 4px}nav>a{font-size:15px}.nav-dropdown{font-size:15px}.nav-dropdown summary{padding:5px 7px;gap:5px}.dropdown-menu{width:min(280px,calc(100vw - 36px))}.contact-page{padding:22px 24px}.about-content h2{font-size:38px}}@media(max-width:380px){nav{gap:9px}nav>a{font-size:14px;gap:4px}.nav-dropdown{font-size:14px}.nav-dropdown summary{gap:4px}.nav-dropdown .nav-icon{display:none}}

/* Substantial About and Contact pages with raised panels and pill actions. */
.info-page{padding-top:38px;padding-bottom:50px}.info-hero{padding:38px 42px 40px;border-radius:32px;background:linear-gradient(125deg,rgba(255,255,255,.91),rgba(235,252,251,.87) 65%,rgba(255,245,219,.88));border:1px solid rgba(110,150,177,.35);box-shadow:0 12px 26px rgba(43,79,105,.19),inset 0 1px 0 #fff;margin-bottom:30px}.section-label{font-size:14px!important;font-weight:700;letter-spacing:.12em;color:#3d6692;margin:0 0 16px!important;line-height:1.5!important}.info-page h2{font-family:Caveat,'Segoe Print',cursive;font-size:47px;line-height:1.14;color:#1515bb;margin:0 0 20px}.info-hero h2{font-size:clamp(48px,5vw,70px);max-width:940px;line-height:1.06;margin-bottom:24px}.info-page p,.info-page li,.info-page address{font-size:20px;line-height:1.7}.info-page p{margin:0 0 20px}.info-hero p{max-width:1050px}.info-page .hero-copy{font-size:25px;line-height:1.6}.action-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:26px}.pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:13px 23px;min-height:50px;border:1px solid rgba(48,70,180,.4);background:rgba(255,255,255,.67);box-shadow:0 3px 7px rgba(41,69,101,.1);font-size:17px;font-weight:700;text-decoration:none;color:#1717ae;line-height:1.4}.pill.primary{background:#f8ae27;color:#231b0b;border-color:#d58d14}.pill:hover{background:#e5f3f5;box-shadow:0 5px 11px rgba(41,69,101,.16)}.pill.primary:hover{background:#ffc34d}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:28px}.info-card{padding:30px 32px;border:1px solid rgba(110,150,177,.35);border-radius:26px;background:rgba(255,255,255,.66);box-shadow:0 5px 14px rgba(43,79,105,.1)}.info-card p:last-child{margin-bottom:0}.info-card h2{font-size:43px}.text-link{font-size:18px;font-weight:700;text-underline-offset:5px;display:inline-block;margin-top:7px}.wide-card{margin:0 0 28px}.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:25px}.info-page h3{font-size:23px;color:#293d78;margin:0 0 12px;line-height:1.3}.process-grid p{font-size:19px}.project-callout{border-left:5px solid #ee9200;margin-bottom:28px}.closing-panel{text-align:center;border-radius:26px;background:rgba(255,255,255,.36);padding:30px}.closing-panel .action-row{justify-content:center}.closing-panel p{margin-bottom:20px}.contact-methods{grid-template-columns:repeat(3,minmax(0,1fr))}.contact-methods .info-card{padding:27px 25px}.contact-methods h2{font-size:37px}.contact-methods p,.contact-methods address{font-size:18px}.contact-value{display:inline-block;overflow-wrap:anywhere;font-size:19px;font-weight:700;text-underline-offset:5px}.info-page address{font-style:normal}.enquiry-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:25px}.enquiry-grid ul{padding-left:23px;margin:0}.enquiry-grid li{padding-left:3px;margin-bottom:10px;font-size:19px}@media(max-width:900px){.contact-methods{grid-template-columns:1fr 1fr}.contact-methods .info-card:last-child{grid-column:1/-1}.process-grid{grid-template-columns:1fr;gap:22px}}@media(max-width:650px){.info-page{padding-top:25px;padding-bottom:30px}.info-hero{padding:27px 24px;border-radius:26px}.info-page .hero-copy{font-size:22px}.info-page p,.info-page li{font-size:19px}.info-grid,.contact-methods,.enquiry-grid{grid-template-columns:1fr;gap:22px}.contact-methods .info-card:last-child{grid-column:auto}.info-card{padding:25px 24px}.info-page h2{font-size:39px}.info-hero h2{font-size:47px}.section-label{font-size:12px!important}.pill{font-size:16px;padding:12px 19px}.closing-panel{padding:26px 20px}}

/* Homepage images suggest the work while leaving the copy fully readable. */
.directions .direction{position:relative;isolation:isolate;overflow:hidden;background:rgba(255,255,255,.72)}
.directions .direction::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;background-position:center;opacity:.25}
.directions .direction>*{position:relative;z-index:1}
.directions .direction-design::before{background-image:url("design-collectibles.jpg");background-position:center 60%}
.directions .direction-engineering::before{background-image:url("engineering-electronics.jpg");background-position:center}
.directions .direction:hover{background:rgba(255,255,255,.87)}

/* Homepage: dark teal foundation beneath the original photographic hero. */
body.home-page{background:#10272c;background-image:linear-gradient(180deg,#173b40 0%,#10272c 100%);background-attachment:fixed}
.home-page .navigation{background:#f5f5ed;border-bottom:1px solid rgba(30,60,67,.2)}
.home-page main{padding-top:4px;padding-bottom:12px}
.home-page .magic{background:transparent;color:#ffb02e}
.home-page .directions .direction{background:#faf7ed;border-color:rgba(255,255,255,.35);border-radius:12px;box-shadow:0 9px 22px rgba(0,0,0,.24)}
.home-page .directions .direction:hover{background:#fffdf6;box-shadow:0 12px 26px rgba(0,0,0,.3)}
.home-page .footer{background:rgba(0,0,0,.12);border-top:1px solid rgba(245,241,222,.17);color:#f3efdf}
.home-page .footer a{color:#f3efdf;text-underline-offset:4px}

/* Softly marbled teal, with the original shade as the middle tone. */
body.home-page{background-color:#173b40;background-image:radial-gradient(ellipse at 5% 42%,rgba(70,124,124,.78) 0%,rgba(70,124,124,.32) 24%,transparent 52%),radial-gradient(ellipse at 88% 32%,rgba(61,93,111,.8) 0%,rgba(61,93,111,.28) 28%,transparent 57%),radial-gradient(ellipse at 55% 78%,rgba(18,45,56,.88) 0%,rgba(18,45,56,.35) 29%,transparent 59%),radial-gradient(ellipse at 93% 95%,rgba(76,125,119,.68) 0%,transparent 48%),linear-gradient(135deg,#244e50 0%,#173b40 42%,#294e59 72%,#102b32 100%);background-attachment:fixed;background-repeat:no-repeat;background-size:cover}

.design-process{margin:35px 0;padding:30px 35px;background:rgba(255,255,255,.4);border-left:4px solid #ee9200;border-radius:4px}.design-close .pill{margin-top:5px}@media(max-width:750px){.design-process{padding:24px}}

/* Shared natural teal marble foundation on every page. */
body,body.home-page{background-color:#173b40;background-image:url("teal-marble.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;color:#f5f0e2}
.navigation,.home-page .navigation{background:#f5f5ed;border-bottom:1px solid rgba(30,60,67,.2)}
.magic,.home-page .magic{background:transparent;color:#ffb02e}
:is(.engineering-content,.design-content)>p{color:#f5f0e2}
:is(.engineering-content,.design-content) :is(.engineering-lead,.design-lead){color:#1c1c1c;background:linear-gradient(120deg,#fffdf6,#e9f6f2 65%,#faf1d9);box-shadow:0 8px 22px rgba(0,0,0,.23),inset 0 1px 0 #fff}
:is(.engineering-services,.design-services) section,.info-card{background:rgba(250,247,237,.96);color:#1c1c1c;border-color:rgba(255,255,255,.4);box-shadow:0 7px 19px rgba(0,0,0,.2)}
.info-hero{background:linear-gradient(125deg,#fffdf6,#edf8f4 65%,#fcf2dc);color:#1c1c1c;box-shadow:0 12px 28px rgba(0,0,0,.25)}
.design-process{background:rgba(250,247,237,.96);color:#1c1c1c;box-shadow:0 6px 17px rgba(0,0,0,.18)}
:is(.engineering-close,.design-close) h2,.closing-panel h2{color:#ffb02e}
.closing-panel{background:rgba(10,30,34,.48);border:1px solid rgba(243,239,223,.18);color:#f5f0e2}
:is(.engineering-content,.design-content)>.back{color:#f5f0e2}
.footer,.home-page .footer{background:rgba(0,0,0,.22);border-top:1px solid rgba(245,241,222,.17);color:#f3efdf}.footer a,.home-page .footer a{color:#f3efdf;text-underline-offset:4px}
/* Photos are independent 25%-opacity layers; the copy stays fully opaque. */
.design-services .design-photo{position:relative;isolation:isolate;overflow:hidden;background:#faf7ed}
.design-services .design-photo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;opacity:.25}
.design-services .design-photo>*{position:relative;z-index:1}
.design-photo-collections::before{background-image:url("personal-collections.jpg");background-position:center 65%!important}
.design-photo-dioramas::before{background-image:url("dioramas.jpg");background-position:center 56%!important}
.design-photo-museum::before{background-image:url("museum-exhibits.jpg")}
.design-photo-retail::before{background-image:url("retail-displays.jpg");background-position:center 58%!important}
@media(max-width:650px){body,body.home-page{background-attachment:scroll}}

/* Engineering service photography, with shared image strength across cards. */
.engineering-services .engineering-photo{position:relative;isolation:isolate;overflow:hidden;background:#faf7ed}
.engineering-services .engineering-photo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;opacity:.30}
.engineering-services .engineering-photo>*{position:relative;z-index:1}
.engineering-photo-architecture::before{background-image:url("software-architecture.jpg")}
.engineering-photo-databases::before{background-image:url("database-design.jpg")}
.engineering-photo-recovery::before{background-image:url("data-recovery.jpg")}
.engineering-photo-legacy::before{background-image:url("legacy-windows.png");background-position:center top!important}
.directions .direction::before,.design-services .design-photo::before{opacity:.35}
.engineering-services p {
     -webkit-text-stroke: 0.15px currentColor;
}