/* Turtle Tech Lab — website refresh. No external font dependencies. */
:root {
    --navy:#073b60;
    --text:#294d69;
    --teal:#00899d;
    --aqua:#e8f8fa;
    --border:#deebef;
    --serif:Georgia,'Times New Roman',serif
}


* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:90px
}

body {
    margin:0;
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.55;
    background:#fff
}

h1,h2,h3,p {
    margin:0
}

a {
    color:inherit
}

img {
    display:block;
    max-width:100%
}

button {
    font:inherit
}

svg {
    width:26px;
    height:26px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0
}

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

.section {
    padding:30px 0
}

.section-title,.eyebrow {
    font-size:11px;
    font-weight:600;
    letter-spacing:.23em;
    text-transform:uppercase;
    color:#007a91
}

.section-title {
    margin-bottom:20px
}

h3 {
    font-family:var(--serif);
    font-size:19px;
    line-height:1.3;
    color:var(--navy);
    font-weight:600
}

a:focus-visible,button:focus-visible {
    outline:3px solid #005a85;
    outline-offset:5px
}

.skip-link {
    position:fixed;
    top:8px;
    left:8px;
    z-index:200;
    background:#fff;
    padding:12px;
    transform:translateY(-150%)
}

.skip-link:focus {
    transform:none
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 22px;
    min-height:44px;
    border-radius:30px;
    background:var(--teal);
    color:#fff;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:background .2s
}

.button:hover {
    background:#006d81
}

.site-header {
    position:sticky;
    top:0;
    background:#fff;
    z-index:100;
    border-bottom:1px solid #edf3f5
}

.header-container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:66px
}

.brand {
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--navy);
    font-family:var(--serif);
    font-size:21px;
    font-weight:bold;
    text-decoration:none;
    white-space:nowrap
}

.brand img {
    width:40px;
    height:40px;
    object-fit:contain
}

.main-nav {
    display:flex;
    align-items:center;
    gap:24px
}

.main-nav a {
    text-decoration:none;
    font-size:13px;
    padding:16px 0
}

.main-nav a:hover {
    color:var(--teal)
}

.header-button {
    font-size:12px;
    min-height:36px;
    padding:8px 21px
}

.menu-toggle {
    display:none
}

.menu-toggle[hidden] {
    display:none
}


.hero {
    position:relative;
    isolation:isolate;
    background:#f5fbfd;
    overflow:hidden
}

.hero-art {
    position:absolute;
    inset:0;
    z-index:-2;
    background:url('images/hero-background.png') center right/cover no-repeat
}

.hero::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.96) 30%,rgba(255,255,255,.88) 43%,rgba(255,255,255,.18) 61%,transparent 72%)
}

.hero-container {
    min-height:550px;
    display:flex;
    align-items:center;
    padding-block:52px
}

.hero-content {
    width:53%;
    max-width:620px
}

.eyebrow {
    margin-bottom:16px
}

.hero h1 {
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(36px,3.5vw,50px);
    line-height:1.12;
    letter-spacing:-.035em;
    color:var(--navy);
    margin-bottom:20px
}

.hero-description {
    font-size:17px;
    line-height:1.55;
    max-width:530px;
    margin-bottom:13px;
    color:#163e60
}

.hero-button {
    margin-top:6px
}

.hero-values {
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-top:22px;
    color:var(--navy)
}


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

.service-card {
    display:flex;
    align-items:flex-start;
    gap:20px;
    border:1px solid var(--border);
    border-radius:6px;
    padding:24px;
    box-shadow:0 2px 6px #173f6010
}

.icon-circle {
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:#e6f7fa;
    color:var(--teal);
    border-radius:50%
}

.service-card h3 {
    margin-bottom:7px
}

.service-card p,.why-item p,.process p {
    font-size:14px;
    line-height:1.5
}

.websites {
    border-top:1px solid #58cedf;
    padding-block:32px
}

.website-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center
}

.website-heading {
    font-family:var(--serif);
    font-size:26px;
    color:var(--navy);
    line-height:1.25;
    margin-bottom:14px
}

.websites .button {
    margin-top:18px
}

.website-features {
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px 24px
}

.website-features li {
    display:flex;
    align-items:center;
    gap:16px;
    font-size:14px
}

.website-features .icon-circle {
    width:50px;
    height:50px
}

.why-us,.about {
    background:linear-gradient(110deg,#e6f8fa,#f2fbfc)
}

.why-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px
}

.why-item {
    padding-right:24px
}

.why-item:not(:last-child) {
    border-right:1px solid #bee9ef
}

.why-item>svg {
    color:var(--teal);
    width:32px;
    height:32px;
    margin-bottom:7px
}

.why-item h3 {
    margin-bottom:6px
}

.process {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px 40px
}

.process-step {
    display:flex;
    gap:24px;
    align-items:flex-start
}

.step-number {
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    flex-shrink:0;
    color:#065da0;
    background:#e7f6ff;
    font-family:var(--serif);
    font-size:22px
}

.process-step:nth-child(2) .step-number {
    background:#e4faf1;
    color:#007e81
}

.process-step:nth-child(3) .step-number {
    background:#f1edff;
    color:#4d36c7
}

.process-step:nth-child(4) .step-number {
    background:#fff5ce
}

.process-step:nth-child(5) .step-number {
    background:#ddf5ff
}

.process-step:nth-child(6) .step-number {
    background:#e0f8ed
}

.process h3 {
    margin:2px 0 7px
}

.about-layout {
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:44px;
    align-items:center
}

.about .section-title {
    margin-bottom:12px
}

.about p {
    font-size:14px
}

.about-tagline {
    color:var(--navy);
    font-weight:bold;
    margin-top:3px
}

.contact-details {
    border-left:1px solid #b8e0e8;
    padding-left:38px;
    scroll-margin-top:100px
}

.contact-item {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:9px
}

.contact-item svg {
    color:var(--teal);
    width:20px;
    height:20px
}

.contact-item a {
    text-decoration:none;
    overflow-wrap:anywhere
}

.contact-item a:hover {
    text-decoration:underline
}

.contact-action {
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:16px
}

.contact-action p {
    font-size:13px
}

.site-footer {
    padding-block:18px
}

.footer-container {
    display:flex;
    align-items:center;
    gap:24px
}

.footer-brand {
    font-size:18px;
    margin-right:auto
}

.footer-brand img {
    width:34px;
    height:34px
}

.footer-container p,.footer-website {
    font-size:12px
}

.footer-website {
    text-decoration:none;
    border-left:1px solid #bed9e1;
    padding-left:24px
}

.linkedin-link {
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    font-weight:bold;
    line-height:1;
    background:#0876a3;
    color:#fff;
    padding:3px 4px;
    border-radius:2px;
    text-decoration:none
}


@media(min-width:1600px) {
    .hero-art {
    background-size:1600px auto;
    background-color:#eaf8fc
}


}


@media(max-width:1100px) {
    .container {
    width:calc(100% - 64px)
}

.main-nav {
    gap:16px
}

.hero-container {
    min-height:520px
}

.hero-content {
    width:56%
}

.hero h1 {
    font-size:40px
}

.service-card {
    padding:20px;
    gap:14px
}

.service-card h3 {
    font-size:17px
}

.icon-circle {
    width:48px;
    height:48px
}

.website-layout {
    gap:32px
}

.process {
    gap:24px
}

.process-step {
    gap:16px
}

.contact-action {
    align-items:flex-start;
    flex-direction:column
}


}


@media(max-width:850px) {
    .header-container {
    flex-wrap:wrap;
    gap:0;
    min-height:68px
}

.header-button {
    display:none
}

.brand {
    font-size:20px
}

.main-nav {
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 22px;
    padding-bottom:12px
}

.menu-toggle:not([hidden]) {
    display:block;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    cursor:pointer;
    margin-left:auto
}

.menu-toggle span {
    display:block;
    width:24px;
    height:2px;
    margin:5px auto;
    background:var(--navy);
    transition:transform .2s
}

.nav-enhanced .main-nav {
    display:none
}

.nav-enhanced .main-nav.is-open {
    display:flex
}

.menu-toggle[aria-expanded=true] span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)
}

.menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity:0
}

.menu-toggle[aria-expanded=true] span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)
}

.hero h1 {
    font-size:36px
}

.hero-content {
    width:62%
}

.hero::before {
    background:linear-gradient(90deg,#fffffff7 0%,#fffffff0 42%,#ffffffa8 60%,transparent 85%)
}

.hero-description {
    font-size:16px
}

.services-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.why-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
}

.why-item:nth-child(2) {
    border-right:0
}

.website-layout,.about-layout {
    grid-template-columns:1fr;
    gap:28px
}

.process {
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.contact-details {
    border-left:0;
    border-top:1px solid #b8e0e8;
    padding:22px 0 0
}

.contact-action {
    flex-direction:row;
    align-items:center
}

.footer-container {
    flex-wrap:wrap;
    gap:18px
}


}


@media(max-width:600px) {
    html {
    scroll-padding-top:78px
}

.container {
    width:calc(100% - 40px)
}

.section {
    padding:28px 0
}

.hero {
    display:flex;
    flex-direction:column;
    background:#f5fbfd
}

.hero::before {
    display:none
}

.hero-container {
    min-height:0;
    padding-block:34px 26px
}

.hero-content {
    width:100%;
    max-width:none
}

.hero h1 {
    font-size:36px;
    line-height:1.15;
    letter-spacing:-.03em
}

.eyebrow {
    font-size:10px;
    letter-spacing:.18em
}

.hero-description {
    font-size:16px
}

.hero-art {
    position:relative;
    inset:auto;
    z-index:auto;
    width:100%;
    height:260px;
    background-position:right center;
    background-size:auto 100%
}

.hero-values {
    font-size:9px;
    letter-spacing:.13em
}

.services-grid {
    grid-template-columns:1fr
}

.service-card {
    padding:22px
}

.service-card h3 {
    font-size:20px
}

.service-card p,.why-item p,.process p {
    font-size:15px
}

.website-heading {
    font-size:25px
}

.website-features {
    grid-template-columns:1fr;
    gap:18px
}

.why-grid {
    gap:24px 18px
}

.why-item {
    padding-right:12px
}

.why-item h3 {
    font-size:18px
}

.process {
    grid-template-columns:1fr;
    gap:24px
}

.process-step {
    gap:20px
}

.process h3 {
    font-size:20px
}

.contact-action {
    flex-direction:column;
    align-items:flex-start
}

.footer-brand {
    flex-basis:calc(100% - 48px)
}

.footer-container {
    gap:14px
}

.footer-website {
    padding-left:14px
}

.about p {
    font-size:15px
}


}


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

*,*::before,*::after {
    transition:none!important
}


}
/* Align the desktop hero with the service cards */
@media (min-width: 1101px) {
    .hero {
        width: min(1280px, calc(100% - 112px));
        margin-inline: auto;
    }

    .hero-container {
        width: 100%;
    }

    .hero-art {
        background-size: cover;
    }
}

/* Remove the blue line below Services */
.websites {
    border-top: none;
}
/* Contain the coloured sections on desktop */
@media (min-width: 1101px) {
    .why-us,
    .about {
        width: min(1280px, calc(100% - 112px));
        margin-inline: auto;
    }

    .why-us > .container,
    .about > .container {
        width: 100%;
    }
}
/* Give text breathing room inside the blue sections */
@media (min-width: 1101px) {
    .why-us > .container,
    .about > .container {
        padding-inline: 28px;
    }
}

@media (min-width: 1101px) {
    .websites > .container,
    .how-we-work > .container {
        padding-inline: 28px;
    }
}