/*
 * Main style for magnum template.
 *
 * Visual theme adapted from the "Seajay" design language:
 *  - Palette: teal primary, deep sea-blue secondary, ink-navy dark, sand greys.
 *  - Typography: Montserrat headings (tight tracking) + Lato body, Playfair-free.
 *  - Components: pill buttons, square shadowed cards, dark full-bleed heroes.
 *
 * Brand colours (the original orange/blue) can be reintroduced later by
 * overriding the custom properties in :root below.
 */

:root {
    --teal:       #64a2ad; /* primary accent (replaces brand orange)        */
    --teal-dark:  #54919c; /* primary hover                                  */
    --sea:        #1f4e5a; /* secondary accent / nautical (replaces blue)    */
    --sea-dark:   #163a44; /* secondary hover                                */
    --ink:        #031521; /* darkest: headings, dark sections, footer       */
    --sand:       #f2f2eb; /* muted section background                       */
    --sand-2:     #e7e7de; /* card alt / hover wash                          */
    --body:       #808080; /* body text on light surfaces                    */
    --border:     #e1e1e1; /* light borders                                  */
    --white:      #ffffff;
    --shadow:     0 0 10px 0 rgba(0, 0, 0, .2);   /* seajay card shadow       */
    --shadow-lg:  0 0 30px 0 rgba(0, 0, 0, .1);
    --radius-pill: 60px;
    --container:  1200px; /* centred content width (theme is not full-bleed)   */
    /* side gutter: centres content within --container, min 4% on small screens */
    --gutter:     max(4%, calc((100% - var(--container)) / 2));
}

/* General style */
html {
    scroll-behavior: smooth;
}

body, html {
    width: 100%;
    height: 100%;
    position: relative;
    /* smaller, capped so it doesn't grow huge on wide screens (theme is ~16px) */
    font-size: clamp(13px, 0.9vw, 15px);
    font-family: 'Lato', sans-serif;
    letter-spacing: 0;
    color: var(--body);
    line-height: 1.55;
}

section {
    position: relative;
}

h1, h2, h3, h4, h5, h6, .title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--ink);
}

p {
    letter-spacing: 0;
    line-height: 1.6em;
}

b {
    font-weight: bold;
}

i {
    font-style: italic;
}

a {
    text-decoration: none;
    color: var(--ink);
    transition: color .2s ease-in-out, background-color .2s ease-in-out;
}

/* Buttons — seajay pill */
a.button, input.button {
    font-family: 'Montserrat', sans-serif;
    font-size: .85em;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 1.05em 2.4em;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.title {
    font-size: 2.1em;
    line-height: 1.08;
}

.left {
    float: left;
}

.right {
    float: right;
}

.close {
    width: 33.3%;
}

.wide {
    width: 66.6%;
}

.mLeft {
    margin-left: 3em;
}

.mRight {
    margin-right: 3em;
}

.mTop {
    margin-top: 7em;
}

.bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

/* Colour tokens (background helpers) */
.bgOrange {
    background-color: var(--teal);
    color: var(--white);
}

.bgBlue {
    background-color: var(--sea);
    color: var(--white);
}

.bgBlack {
    background-color: var(--ink);
    color: var(--white);
}

.bgWhite {
    background-color: rgba(255, 255, 255, .9);
    color: var(--ink);
}

.bgBrown {
    background-color: var(--ink);
    color: var(--white);
}

.bgGrey {
    background-color: var(--sand);
}

.bgInk {
    background-color: var(--ink);
    color: var(--white);
}

.button.bgWhite {
    background-color: var(--white);
    color: var(--teal);
}

.cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Colour tokens (text helpers) */
.orange, header div#header a.orange {
    color: var(--teal);
}

.blue, header div#header a.blue {
    color: var(--sea);
}

.mobile {
    display: none!important;
}

/* Hover style — seajay buttons invert fill <-> outline */
.button.bgOrange:hover {
    background-color: transparent;
    color: var(--teal);
    border-color: var(--teal);
}

.button.bgBlue:hover {
    background-color: transparent;
    color: var(--sea);
    border-color: var(--sea);
}

.button.bgWhite:hover {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}

a .orange:hover, header div#upper > div.bgBlack a:hover, p a:hover, header div#header div a:hover, footer > div > div ul li a:hover, header div#header li a:hover {
    color: var(--teal);
}

header div#upper > div.bgOrange:hover, section.buttonContainer div.left.bgOrange:hover, section#serviceInternal div.close a#iconBack.bgOrange:hover {
    background-color: var(--teal-dark);
}

a .blue:hover, header div#header div a.nautical:hover, header div#header li a.nautical:hover {
    color: var(--sea);
}

section.buttonContainer div.left.bgBlue:hover, section#serviceInternal div.close a#iconBack.bgBlue:hover {
    background-color: var(--sea-dark);
}

/* Header style — light sticky bar (seajay light header), solidifies on scroll */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10;
    background-color: var(--white);
    box-shadow: 0 1px 0 0 var(--border);
    transition: box-shadow .3s ease-in-out;
}

header.scrolled {
    box-shadow: 0 2px 15px 0 rgba(3, 21, 33, .08);
}

header div {
    width: 100%;
}

/* Top utility bar — thin ink strip */
header div#upper {
    background-color: var(--ink);
    display: flex;
    align-items: stretch; /* children fill the bar height (so the teal tab does too) */
    box-sizing: border-box;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

header div#upper > div {
    width: 44%;
    float: left;
    padding: .55em 0;
    background-color: transparent !important;
}

header div#upper > div.bgOrange {
    width: 12%;
    background-color: var(--teal) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* the forms link carries .mRight (margin-right:3em); cancel it so it centres */
header div#upper > div.bgOrange a {
    margin-right: 0;
}

header div#upper div ul li {
    list-style-type: none;
}

header div#upper div > *,
header div#upper div > ul > li {
    display: inline-block;
    position: relative;
    padding-right: 4%;
}

header div#upper div > p,
header div#upper div > a,
header div#upper div > ul > li a {
    font-size: .78em;
    letter-spacing: .04em;
}

header div#upper div > p,
header div#upper div > a {
    text-transform: lowercase;
}

header div#upper div > ul {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

header div#upper div > ul > li .navSubmenu {
    display: block;
    position: absolute;
    top: 1.8em;
    left: -1em;
    background-color: var(--ink);
    text-align: start;
    width: 100%;
    padding: 1em 0 1em 1em;
    z-index: 5;
}

header div#upper div > ul > li .navSubmenu.hiddenSubmenu {
    display: none;
}

header div#upper div > ul > li .navSubmenu li {
    margin-bottom: .5em;
}

header div#upper > div.first a {
    font-weight: bold;
}

header div#upper > div.first p {
    line-height: 1em;
}

header div#upper > div.second {
    text-align: right;
}

header div#upper a {
    color: var(--white);
}

/* Language switcher (top bar and mobile menu): the language you switch to */
header .langSwitch > * {
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

header .langSwitch > * + *:before {
    content: "|";
    margin: 0 .6em;
    font-weight: 400;
    opacity: .35;
}

/* desktop: last item of the top bar, right of the forms tab */
header div#upper > div.langSwitch {
    width: auto;
    flex: none;
    display: flex;
    align-items: center;
    padding: 0 0 0 1.4em;
}

header div#upper > div.langSwitch > * {
    padding-right: 0;
    text-transform: uppercase;
}

header div#upper > div.bgOrange a {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

/* Main header row — centred within the container */
header div#header {
    box-sizing: border-box;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* two branch logos side by side (identical-size files -> equal heights) */
header div#header a.logo {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 40%;
    display: flex;
    align-items: center;
    gap: 4%;
}

header div#header a.logo img {
    width: 48%;
    height: auto;
    display: block;
}

header div#header div {
    width: 58%;
    text-align: right;
    line-height: 4.6em;
}

header div#header div a {
    margin-right: 3%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .92em;
    letter-spacing: -.01em;
}

/* menu links: contact + offices and services, desktop and mobile */
header div#upper div > ul > li a,
header div#header div a,
header div#header li a {
    text-transform: uppercase;
}

/* uppercase links are wider (English ones most): shrink so all three fit on
   one line until the mobile menu takes over */
@media screen and (max-width: 1100px) {
    header div#header div a {
        font-size: .8em;
    }
}

@media screen and (max-width: 980px) {
    header div#header div a {
        font-size: .64em;
    }
}

header div#header a {
    color: var(--ink);
}

header div#header div.right a {
    position: relative;
}

/* animated teal underline on desktop nav */
header div#header div.right a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 1.7em;
    width: 0;
    height: 2px;
    background-color: var(--teal);
    transition: width .25s ease-in-out;
}

header div#header div.right a:hover:after {
    width: 100%;
}

/* desktop second level menu (service filters), opens on hover */
header div#header div.right .subnav {
    position: relative;
    display: inline-block;
    margin-right: 3%;
}

header div#header div.right .subnav > a {
    margin-right: 0;
}

header div#header div.right .subnavMenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: .6em 0;
    list-style: none;
    text-align: left;
    line-height: 1.4;
    background-color: var(--white);
    border-top: 2px solid var(--teal);
    box-shadow: 0 12px 30px rgba(3, 21, 33, .12);
    z-index: 5;
}

/* last menu item: open towards the left so it stays inside the page */
header div#header div.right .subnav:last-child .subnavMenu {
    left: auto;
    right: 0;
}

header div#header div.right .subnav:hover .subnavMenu,
header div#header div.right .subnav:focus-within .subnavMenu {
    display: block;
}

header div#header div.right .subnavMenu a {
    display: block;
    margin: 0;
    padding: .6em 1.4em;
    font-size: .8em;
    white-space: nowrap;
}

header div#header div.right .subnavMenu a:after {
    display: none;
}

/* Title over photo — seajay dark hero */
div#previewHeader {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 64vh;
    padding: 9em var(--gutter) 4.5em;
    overflow: hidden;
    background-color: var(--ink);
    isolation: isolate; /* keep the layers below inside the hero */
}

/* layers: poster 0, background video(s) 1-2, dark overlay 3, content 4
   (top/right/bottom/left rather than inset: older iOS Safari lacks inset) */
div#previewHeader:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--ink);
    opacity: .82;
    z-index: 3;
}

div#previewHeader > * {
    position: relative;
    z-index: 4;
}

/* Background video (includes/hero-video.php, js/hero-video.js) */
div#previewHeader > .heroPoster,
div#previewHeader > video.heroVideo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

div#previewHeader > .heroPoster {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

/* hidden until actually playing, so the poster shows meanwhile */
div#previewHeader > video.heroVideo {
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity .8s ease-in-out;
}

div#previewHeader > video.heroVideo.heroVideoPlaying {
    opacity: 1;
}

/* playlist cross-fade: the incoming clip fades in on top, then the
   outgoing one fades out underneath it */
div#previewHeader > video.heroVideo.heroVideoTop {
    z-index: 2;
}

div#previewHeader > video.heroVideo.heroVideoHidden {
    opacity: 0;
    transition-delay: .8s;
}

/* Hero icon (services / landing pages) — legible over the dark overlay */
div#previewHeader > i {
    color: var(--white);
}

div#previewHeader .title {
    color: var(--white);
    padding-top: 0;
    margin-left: 0;
    padding-bottom: .5em;
    max-width: 62%;
    font-size: 2.9em;
    line-height: 1.04;
}

div#previewHeader .heroCtas {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    margin-left: 0;
}

div#previewHeader > a.button {
    margin-bottom: 0;
}

/* Header different style in contacts and about pages */
div#previewHeader.noBlock {
    min-height: 60vh;
}

div#previewHeader.noBlock .title {
    padding-bottom: .6em;
}

div#previewHeader.noBlock .button {
    margin-bottom: 0;
}

/* Feature blocks — seajay icon-box cards */
div.fourBlock {
    padding: 5em var(--gutter);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

div.fourBlock > .block {
    width: 19%;
    padding: 2.8% 2.2%;
    margin-left: 1.5%;
    float: none;
    min-height: 15em;
    background-color: var(--white);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform .25s ease-in-out;
}

div.fourBlock > .block.first {
    margin-left: 0;
}

/* alternating seajay card tints */
div.fourBlock > .block.third {
    background-color: var(--teal);
}

div.fourBlock > .block.third h2,
div.fourBlock > .block.third p {
    color: var(--white);
}

div.fourBlock > .block.fourth {
    background-color: var(--sea);
}

div.fourBlock > .block.fourth h2,
div.fourBlock > .block.fourth p {
    color: var(--white);
}

div.fourBlock > .block h2 {
    font-weight: 700;
    margin-bottom: .6em;
    font-size: 1.35em;
    letter-spacing: -.02em;
}

div.fourBlock > .block p {
    font-size: .92em;
}

div.fourBlock > .block:hover {
    transform: translateY(-8px);
}

/* Banner style — seajay section CTA band */
div.banner {
    padding: 4.5em var(--gutter);
    text-align: center;
}

div.banner .title {
    margin-bottom: .8em;
}

div.banner.bgOrange .title,
div.banner.bgBlue .title {
    color: var(--white);
}

/* Service row — full-width band; the image (.bg cover) crops to the text height */
div.serviceRow {
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

/* mirror the alternating row: image on the left */
div.serviceRow div.wide.left {
    order: -1;
}

div.serviceRow div.close {
    width: 36%;
    box-sizing: border-box;
    padding: 3% 4%;
    min-height: 15em; /* floor so short copy still gives the image a sensible height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.serviceRow div.close .title {
    margin-bottom: .5em;
}

div.serviceRow div.close p {
    margin-bottom: 1.5em;
}

div.serviceRow div.close div {
    text-align: center;
}

/* image column stretches to the row height and crops (cover/center from .bg) */
div.serviceRow div.wide {
    width: 64%;
    padding: 0;
}

/* Row with text style */
section.row {
    overflow: hidden;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

section.row .close {
    padding: 5%;
    width: 23.3%;
}

section.row .wide {
    padding: 5%;
    width: 56.6%;
}

section.row .wide.bg {
    padding: 10% 0;
    width: 66.6%;
}

/* Mail form style — seajay dark panel (full-bleed bg, contained content) */
div#form {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

form input[type="text"], form textarea {
    font-family: 'Lato', sans-serif;
    float: left;
    padding: 1em 1.2em;
    font-size: .85em;
    color: var(--ink);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

form input[type="text"]:focus, form textarea:focus {
    outline: none;
    border-color: var(--teal);
}

form input[type="text"] {
    margin-bottom: 1.5em;
    height: 3.2em;
}

form textarea {
    height: 15.4em;
    width: 100%;
    margin-bottom: 2em;
}

div#form div.close {
    padding: 4% 5% 3%;
    width: 23.3%;
}

div#form div.wide {
    padding: 4% 5% 3%;
    width: 56.6%;
}

div#form div.close h2 {
    margin-bottom: .5em;
    color: var(--white);
}

div#form div.close,
div#form div.close p {
    color: rgba(255, 255, 255, .8);
}

form a {
    color: var(--white);
    text-decoration: underline;
}

form label {
    letter-spacing: 0;
}

div#form input[name="nameForm"], div#form input[name="emailForm"], div#form input[name="nameService"], div#form input[name="emailService"] {
    width: 49%;
}

div#form input[name="emailForm"], div#form input[name="emailService"] {
    margin-left: 2%;
}

div#form input[name="subjectForm"], div#form input[name="subjectService"] {
    width: 70%;
}

div#form input[name="phoneForm"], div#form input[name="phoneService"] {
    width: 28%;
    margin-left: 2%;
}

div#form input[type="submit"] {
    border: 0;
    float: right;
}

#subjectSpecial {
   display: none !important;
}

/* Social icons style */
div.socialIcons {
    text-align: center;
}

div.socialIcons a span.fa-lg {
    border-radius: 50%;
    margin: .5em 1%;
    color: var(--white);
    background-color: var(--teal);
    transition: background-color .2s ease-in-out;
}

div.socialIcons a span.fa-lg:hover {
    background-color: var(--ink);
}

div.socialIcons a span.fa-lg i {
    font-style: normal;
}

div.socialIcons a span.whatsapp {
    display: none;
}

/* Service boxes — seajay attached colored thirds, within the container */
section#external.buttonContainer {
    width: 100%;
    box-sizing: border-box;
    margin: 3em 0;
    padding: 0 var(--gutter);
    background-color: transparent;
    display: flex;
    justify-content: center;
}

/* On the homepage the boxes sit directly under the hero and overlap it */
div#previewHeader + section#external.buttonContainer {
    margin: -4.5em 0 0;
    position: relative;
    z-index: 3;
}

section.buttonContainer div.left {
    width: 33.333%;
    margin: 0;
    min-height: 16em;
    display: flex;
    box-shadow: var(--shadow);
    transition: transform .25s ease-in-out;
}

section.buttonContainer div.left:hover {
    transform: translateY(-6px);
    z-index: 4;
}

section.buttonContainer div.left a {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: .9em;
    padding: 2.6em 2.2em;
    color: var(--white);
}

section.buttonContainer div.left a .image {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .92;
}

section.buttonContainer div.left a .image .fa-4x {
    font-size: 2.5em;
}

section.buttonContainer div.left a .text h3 {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.45;
    color: var(--white);
    text-align: center;
    max-width: 14em;
    margin: 0 auto;
}

/* Footer style — seajay dark section */
footer {
    background-color: var(--ink);
    color: rgba(255, 255, 255, .6);
}

footer .bgGrey {
    background-color: transparent !important;
}

footer a {
    color: rgba(255, 255, 255, .6);
}

footer > div {
    width: 100%;
    box-sizing: border-box;
    font-size: .74em;
    overflow: hidden;
    padding: 1.5% var(--gutter) 2%;
}

footer > div > div.fiveBlock {
    width: 14%;
    padding: 3%;
    float: left;
    text-align: left;
}

footer > div > div h4 {
    text-transform: uppercase;
    margin-top: 1.2em;
    margin-bottom: .8em;
    letter-spacing: .08em;
    font-size: 1em;
}

/* All footer headings white (demo style) */
footer > div > div h4 b,
footer > div > div h4.orange b,
footer > div > div h4.blue b { color: var(--white); }

footer > div > div ul li {
    list-style-type: none;
    margin: 0;
    padding: .7em 0 .7em 1.1em;
    letter-spacing: 0;
    text-align: left;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Little teal arrow bullets in a fixed left gutter (hanging indent) */
footer > div > div ul li:before {
    content: "\203A";
    position: absolute;
    left: 0;
    top: .7em;
    color: var(--teal);
    font-weight: 700;
}

footer > div > div ul li a:hover {
    color: var(--white);
}

/* Footer bottom — brand + quick links + affiliated, full-width row on desktop */
footer .footerBottom {
    width: auto;
    margin: 0;
    padding: 2.5% var(--gutter) 3%;
    display: flex;
    align-items: flex-start;
    gap: 4%;
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: left;
}

footer .footerBrand {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

footer .footerBrand a.logo {
    display: flex;
    align-items: center;
    gap: 1.6em;
    width: 40em;
    max-width: 100%;
    margin: 0 0 1.4em;
}

footer .footerBrand a.logo img {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    display: block;
}

footer .footerAbout {
    line-height: 1.7;
}

/* content stores each line as <p class="mLeft">; cancel the indent so the
   text lines up with the logo above it */
footer .footerAbout p {
    margin: 0 0 .35em;
}

footer .footerAbout a {
    color: rgba(255, 255, 255, .85);
    text-decoration: underline;
}

footer .footerAbout a:hover {
    color: var(--white);
}

footer .footerLinks {
    width: 44%;
}

/* Screen size adjustments */
@media screen and (max-width: 780px) {

    /* General style */
    body, html {
        font-size: 1.6vw;
    }

    .close, .wide {
        width: 100%;
    }

    .mobile {
        display: block!important;
    }

    .desktop {
        display: none!important;
    }

    /* Header style */
    header div#header a.logo {
        width: 62%;
    }

    header div#header a.button {
        margin: .6em;
        color: var(--white);
        width: 6em;
    }

    header > div#header > * {
        width: 100%;
    }

    header div#header ul {
        background-color: var(--sand);
    }

    header div#header li {
        padding: 1em 0;
        text-align: center;
        border-bottom: 1px solid var(--white);
        font-size: 1.4em;
    }

    header div#header li .navSubmenu {
        padding-top: 1em;
    }

    header div#header li .navSubmenu li {
        padding: .5em 0;
        text-align: center;
        border-bottom: none;
        font-size: .8em;
    }

    /* second level menu: collapsed until its toggle is tapped */
    header div#header li.subnav {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    header div#header li.subnav > a {
        flex: 1;
        padding-left: 4.5em; /* + toggle width, keeps the label centred */
    }

    header div#header .subnavToggle {
        width: 3em;
        border: 0;
        background: none;
        color: var(--white);
        font: inherit;
        cursor: pointer;
    }

    header div#header .subnavToggle i {
        transition: transform .25s ease-in-out;
    }

    header div#header li.subnav > .navSubmenu {
        display: none;
        flex-basis: 100%;
    }

    header div#header li.subnav.open > .navSubmenu {
        display: block;
    }

    header div#header li.subnav.open .subnavToggle i {
        transform: rotate(180deg);
    }

    header div#header li.langSwitch > * {
        display: inline-block;
        padding: .3em 0;
        color: var(--teal);
    }

    /* Row style */
    section.row .close, section.row .wide {
        padding: 5%;
        width: 90%;
        text-align: center;
    }

    /* Preview header style */
    div#previewHeader {
        text-align: center;
        align-items: center;
        min-height: 60vh;
        padding: 9em 0 5em;
    }

    div#previewHeader .title {
        max-width: 86%;
        margin: auto;
        font-size: 2.4em;
    }

    div#previewHeader .heroCtas {
        justify-content: center;
        margin-left: 0;
    }

    div#previewHeader .button {
        margin-bottom: 1em;
        margin-left: 0;
    }

    /* Four Block style */
    div.fourBlock {
        overflow: hidden;
        display: block;
        margin-top: 2em;
    }

    div.fourBlock > .block, div.fourBlock > .block.first {
        width: 70%;
        padding: 8%;
        margin: 1.5em auto;
        float: none;
        display: block;
        text-align: center;
        min-height: inherit;
    }

    div.fourBlock > .block h2 {
        font-size: 1.5em;
    }

    /* Service boxes — stack full-width on mobile */
    div#previewHeader + section#external.buttonContainer {
        margin-top: 0;
    }

    section#external.buttonContainer {
        flex-direction: column;
    }

    section.buttonContainer div.left {
        width: 100%;
        min-height: 12em;
    }

    section.buttonContainer div.left:hover {
        transform: none;
    }

    /* Row services */
    div.serviceRow {
        display: none;
    }

    /* Form style */
    div#form div.close, div#form div.wide {
        padding: 7% 5%;
        width: 90%;
        text-align: center;
    }

    form input[type="text"], form textarea {
        font-size: 1.3em;
    }

    /* Social sharing style */
    div.socialIcons a span.whatsapp {
        display: inline-block;
    }

    /* Footer style */
    footer > div {
        font-size: 1em;
    }

    footer > div > div.fiveBlock {
        width: 90%;
        float: none;
        margin: 0 auto;
    }

    footer .footerBottom {
        flex-direction: column;
        gap: 2.5em;
        text-align: center;
    }

    footer .footerBrand,
    footer .footerLinks {
        width: 100%;
    }

    footer .footerBrand {
        align-items: center;
    }

    footer .footerBrand a.logo {
        width: 100%;
        max-width: 30em;
    }

    footer .footerLinks ul {
        display: inline-block;
        text-align: left;
    }
}

/* Screen size adjustments */
@media screen and (max-width: 500px) {

    /* General style */
    body, html {
        font-size: 2.0vw;
    }

    /* Header style */
    header div#header a.logo {
        width: 70%;
    }

    /* Form style */
    div#form input[name="nameForm"], div#form input[name="emailForm"], div#form input[name="subjectForm"], div#form input[name="phoneForm"], div#form input[name="nameService"], div#form input[name="emailService"], div#form input[name="subjectService"], div#form input[name="phoneService"] {
        width: 100%;
    }

    div#form input[name="emailForm"], div#form input[name="phoneForm"], div#form input[name="emailService"], div#form input[name="phoneService"] {
        margin-left: 0%;
    }

}

/* Cloudflare Turnstile widget in the contact forms */
div#form .cf-turnstile {
    margin: 1em 0;
}