/* style.css */
/* =============================================================================
   style.css - DCM Works Boilerplate Styles
   =============================================================================
   Responsive layout, forms, tables, dark mode, and utility classes.
   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS / CUSTOM PROPERTIES
   =============================================================================
   Centralized color palette, font stacks, and RGB variants.
   The -rgb variants enable rgba() usage, e.g. rgba(var(--blue-rgb), .5).
   ============================================================================= */

:root {
    --headings-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --body-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;

    /* Neutrals */
    --black:   #1A1A1A;   --black-rgb:   26, 26, 26;
    --white:   #FAFAFA;   --white-rgb:   250, 250, 250;
    --gray:    #6B7280;   --gray-rgb:    107, 114, 128;
    --silver:  #E5E7EB;   --silver-rgb:  229, 231, 235;
    --dark:    #374151;   --dark-rgb:    55, 65, 81;
    --light:   #F3F4F6;   --light-rgb:   243, 244, 246;

    /* Reds & Pinks */
    --rose:    #F43F5E;   --rose-rgb:    244, 63, 94;
    --red:     #DC2626;   --red-rgb:     220, 38, 38;
    --maroon:  #9D174D;   --maroon-rgb:  157, 23, 77;
    --pink:    #EC4899;   --pink-rgb:    236, 72, 153;

    /* Oranges */
    --orange:  #F97316;   --orange-rgb:  249, 115, 22;
    --amber:   #D97706;   --amber-rgb:   217, 119, 6;

    /* Yellows & Limes */
    --yellow:  #EAB308;   --yellow-rgb:  234, 179, 8;
    --lime:    #65A30D;   --lime-rgb:    101, 163, 13;

    /* Greens */
    --green:   #16A34A;   --green-rgb:   22, 163, 74;
    --emerald: #059669;   --emerald-rgb: 5, 150, 105;
    --olive:   #4D7C0F;   --olive-rgb:   77, 124, 15;

    /* Teals & Cyans */
    --teal:    #0D9488;   --teal-rgb:    13, 148, 136;
    --cyan:    #06B6D4;   --cyan-rgb:    6, 182, 212;
    --aqua:    #22D3EE;   --aqua-rgb:    34, 211, 238;

    /* Blues */
    --sky:     #0EA5E9;   --sky-rgb:     14, 165, 233;
    --blue:    #2563EB;   --blue-rgb:    37, 99, 235;
    --indigo:  #4F46E5;   --indigo-rgb:  79, 70, 229;
    --navy:    #1E3A5F;   --navy-rgb:    30, 58, 95;

    /* Purples & Fuchsias */
    --violet:  #7C3AED;   --violet-rgb:  124, 58, 237;
    --purple:  #9333EA;   --purple-rgb:  147, 51, 234;
    --fuchsia: #D946EF;   --fuchsia-rgb: 217, 70, 239;
}

/* =============================================================================
   2. DARK MODE
   =============================================================================
   body.dark flips black and white for a dark UI, the @media query follows
   the operating system's preference, and body.light (the in-app toggle)
   brings the light values back over a dark preference.
   ============================================================================= */

body.dark {
    --black:  #F1F5F9;   --black-rgb:   241, 245, 249;
    --white:  #0B1121;   --white-rgb:   11, 17, 33;
    --dark:   #E2E8F0;   --dark-rgb:    226, 232, 240;
    --light:  #1A2332;   --light-rgb:   26, 35, 50;
    --silver: #334155;   --silver-rgb:  51, 65, 85;
}

@media (prefers-color-scheme: dark) {
    :root {
        --black:  #F1F5F9;   --black-rgb:   241, 245, 249;
        --white:  #0B1121;   --white-rgb:   11, 17, 33;
        --dark:   #E2E8F0;   --dark-rgb:    226, 232, 240;
        --light:  #1A2332;   --light-rgb:   26, 35, 50;
        --silver: #334155;   --silver-rgb:  51, 65, 85;
    }
}

body.light {
    --black:  #1A1A1A;   --black-rgb:   26, 26, 26;
    --white:  #FAFAFA;   --white-rgb:   250, 250, 250;
    --dark:   #374151;   --dark-rgb:    55, 65, 81;
    --light:  #F3F4F6;   --light-rgb:   243, 244, 246;
    --silver: #E5E7EB;   --silver-rgb:  229, 231, 235;
}

/* =============================================================================
   3. GLOBAL RESET & BASE LAYOUT
   =============================================================================
   Use border-box so padding doesn't add to element width.
   Full-height page with zero default margin and consistent font rendering.
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--body-font);
    background: var(--white);
    color: var(--black);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   4. MEDIA ELEMENTS
   =============================================================================
   Images, video, and SVG scale with their container by default.
   ============================================================================= */

img,
picture,
video,
canvas,
svg {
    display: block;
    height: auto;
    max-width: 100%;
}

/* =============================================================================
   5. FORM CONTROLS
   =============================================================================
   Reset browser defaults so inputs match the app's font and color scheme.
   Dropdown options use variables to prevent invisible text in dark mode.
   ============================================================================= */

input,
button,
textarea,
select {
    border-width: 1px;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    color: inherit;
    background: transparent;
}

select option,
select optgroup {
    background: var(--white);
    color: var(--black);
}

button,
input[type="submit"] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* =============================================================================
   6. TYPOGRAPHY
   =============================================================================
   Responsive heading scale, consistent margins, and body text sizing.
   ============================================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headings-font);
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: inherit;
    margin-top: 8px;
    margin-bottom: 8px;
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.4;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.25;
}

h4 {
    font-size: 1rem;
    line-height: 1.25;
}

h5 {
    font-size: .875rem;
    line-height: 1.25;
}

h6 {
    font-size: .8125rem;
    line-height: 1.25;
}

p {
    font-size: .95rem;
}

span {
    font-size: inherit;
}

p,
span {
    line-height: 1.5;
}

@media (min-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: .875rem; }
    p  { font-size: 1rem; }
}

/* =============================================================================
   7. LINKS & UTILITY CLASSES
   ============================================================================= */

a {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}

.hidden {
    display: none !important;
}

@media (max-width: 767px) {
    .hidden-for-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hidden-for-desktop { display: none !important; }
}

.text-center {
    text-align: center;
}

ul.styled-list {
    margin: 0;
    padding-left: 0;
}

ul.styled-list li {
    list-style-type: none;
}

/* =============================================================================
   8. SPACING UTILITIES
   ============================================================================= */

.vertical-spacer-1 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.vertical-spacer-2 {
    padding-top: 32px;
    padding-bottom: 32px;
}

.vertical-spacer-3 {
    padding-top: 64px;
    padding-bottom: 64px;
}

/* =============================================================================
   9. LAYOUT CONTAINERS
   =============================================================================
   Centered container with max-width and mobile-first padding.
   Flex row/column grid for layout composition.
   ============================================================================= */

.custom-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1200px;
    padding: 16px;
}

@media (min-width: 1440px) {
    .custom-container {
        max-width: 1440px;
    }
}

.custom-row {
    display: flex;
    flex-wrap: wrap;
}

.custom-column {
    flex-basis: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    .custom-column {
        flex-basis: auto;
        width: auto;
    }
}

.wrapper {
    padding: 16px;
}

/* =============================================================================
   10. MEDIA WRAPPER
   =============================================================================
   Maintains a 16:9 aspect ratio with object-fit cover.
   ============================================================================= */

.media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.media-wrapper img,
.media-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================================================
   11. FORM STYLES
   =============================================================================
   Basic accessible form layout, full-width inputs, code blocks, and hr.
   ============================================================================= */

label {
    display: block;
    margin-bottom: 8px;
}

input[type="checkbox"] {
    margin: 0;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    display: inline-block;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    padding: 8px 16px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    margin-bottom: 16px;
}

textarea {
    resize: none;
}

fieldset {
    margin: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--silver);
    margin: 16px 0;
}

pre {
    margin: 0;
    padding: 16px;
    white-space: pre-wrap;
    word-break: break-all;
    background: rgba(var(--silver-rgb), .25);
}

/* =============================================================================
   12. BUTTONS
   =============================================================================
   Primary button, inverted (alt) variant, hover dim effect, disabled state.
   ============================================================================= */

button,
.button {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    border: solid 2px var(--black);
    padding: 8px 16px;
    font-size: .85rem;
    font-weight: 500;
    transition: opacity .25s ease;
}

button[disabled] {
    opacity: .25;
    cursor: not-allowed;
}

button:not([disabled]):hover,
.button:not([disabled]):hover {
    opacity: .5;
}

button.button-alt,
.button.button-alt {
    background: var(--white);
    color: var(--black);
}

/* =============================================================================
   13. TABLES
   =============================================================================
   Responsive table wrapper, bordered cells, zebra striping, mobile sizing.
   ============================================================================= */

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

table caption {
    margin-bottom: 16px;
}

th,
td {
    border: 1px solid var(--silver);
    padding: 8px;
}

th {
    background: rgba(var(--silver-rgb), .5);
    font-weight: 700;
}

td {
    font-weight: 400;
}

td.actions-col {
    white-space: nowrap;
}

tr:nth-child(even) td {
    background: rgba(var(--silver-rgb), .15);
}

@media (max-width: 767px) {
    table { font-size: .85rem; }
}

/* =============================================================================
   14. HEADER
   =============================================================================
   Site-wide header - mobile nav collapse/expand, desktop dropdown menus.
   Language switcher, logo alignment, and responsive ordering.
   ============================================================================= */

.header {
    box-shadow: 0 1px 2px rgba(var(--black-rgb), .05);
}

.header a > p {
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0;
}

.header .custom-container {
    padding: 12px 16px;
}

.header .custom-container > .custom-row {
    align-items: center;
    justify-content: space-between;
}

.header img {
    max-width: 160px;
}

.header li {
    flex: 0 0 100%;
    list-style-type: none;
}

.header li a {
    display: inline-block;
    position: relative;
}

.header li:not(:last-child) {
    margin-bottom: 16px;
}

.header nav > ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 0;
    margin: 0;
}

.header li.active > a,
.header li a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(var(--black-rgb), .5);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.header.expanded .hidden-for-mobile {
    display: block !important;
}

.header .custom-column {
    width: auto;
}

.header select {
    margin: 0;
}

/* -------------------------------------------------------------------------
   Header - Mobile (< 768px)
   ------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    .header .custom-column:first-child {
        flex: 0 0 70%;
        width: 70%;
        order: 0;
        overflow: hidden;
    }

    .header .hidden-for-desktop {
        flex: 0 0 30%;
        width: 30%;
        order: 1;
        text-align: end;
        overflow: hidden;
    }

    .header .hidden-for-mobile {
        order: 2;
        display: block !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }

    .header.expanded .custom-column.hidden-for-mobile {
        max-height: 512px;
    }

    .header .custom-column.hidden-for-mobile nav {
        padding: 16px 0;
    }

    .header li > ul {
        background: transparent;
        box-shadow: none;
        display: block !important;
        margin-top: 16px;
        min-width: auto;
        position: static;
    }
}

/* -------------------------------------------------------------------------
   Header - Desktop (>= 768px)
   ------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
    .header a > p {
        font-size: 2.5rem;
    }

    .header img {
        max-width: 200px;
    }

    .header li {
        position: relative;
        flex: 0 0 auto;
    }

    .header li:not(:last-child) {
        margin: 0;
        margin-inline-end: 16px;
    }

    .header li > ul {
        display: none;
        padding: 8px 16px;
        position: absolute;
        inset-inline-end: 0;
        min-width: 192px;
        z-index: 10;
        text-align: end;
        box-shadow:
            0 4px 0 0 rgba(var(--shadow-rgb, 0, 0, 0), .05),
            0 8px 16px 0 rgba(var(--shadow-rgb, 0, 0, 0), .1);
    }

    .header li > ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--white);
    }

    .header li:hover > ul {
        display: block;
    }

    .header li:focus-within > ul {
        display: block;
    }

    .header li > ul > li {
        flex: 0 0 100%;
        padding: 8px 0;
        margin: 0 !important;
    }
}

/* =============================================================================
   15. FOOTER
   =============================================================================
   Responsive footer with column reordering on mobile.
   ============================================================================= */

.footer p {
    margin: 0;
}

.footer .styled-list {
    display: flex;
    flex-flow: row wrap;
}

.footer li {
    flex: 0 0 100%;
    list-style-type: none;
}

.footer li a {
    display: inline-block;
    position: relative;
}

.footer li:not(:last-child) {
    margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
    .footer .custom-column:first-child { order: 2; }
    .footer .custom-column:last-child  { order: 1; margin-bottom: 32px; }
}

@media screen and (min-width: 768px) {
    .footer .custom-row { justify-content: space-between; align-items: center; }
    .footer li          { flex: 0 0 auto; }
    .footer li:not(:last-child) { margin: 0; margin-inline-end: 16px; }
}
/* theme.css */
/* =============================================================================
   theme.css - DCM Works, on top of style.css (never edit that file)
   =============================================================================
   Everything that is not the style.css base, in cascade order: 1-4 the
   look (tokens for both modes, typography, buttons, forms), 5 the page
   layout (sections, headings, cards, hero, footer), 6 the site itself.
   css.php serves style.css + this file + header.css (the header shared
   with sites/) as one gzipped request.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CONFIG - fonts, brand, shape and the neutrals of both modes
   -------------------------------------------------------------------------- */

:root {
    /* Fallback font stacks; the site section below sets its own faces */
    --headings-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --body-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;

    /* Brand - ink by default: buttons and accents follow the text color and
       invert automatically in dark mode */
    --brand:     var(--black);
    --brand-rgb: var(--black-rgb);

    /* Shape */
    --radius:    8px;    /* controls: inputs, buttons, pills */
    --radius-lg: 12px;   /* surfaces: cards */

    /* Larger surfaces get a softer corner than the controls */
    --radius-xl: 20px;

    /* The booking modal (ui.js): the boilerplate's default, as in its
       theme.css (the proposal pages in sites/ dress theirs up) */
    --modal-width:    480px;
    --modal-radius:   var(--radius-lg);
    --modal-shadow:   0 12px 32px -8px rgba(var(--shadow-rgb), .24);
    --modal-backdrop: rgba(var(--shadow-rgb), .5);
    --modal-blur:     0px;

    /* Hairline used for every border; flips with the mode */
    --border: rgba(var(--black-rgb), .12);

    /* The studio's own colours: --accent is the indigo of every call to
       action (deep enough for white text on buttons, 6.3:1), --ink the
       dark stage of the hero and the closing band (dark in both modes,
       a step darker in dark mode), --ink-deep the far end of its
       gradients, and --brand-text the accent as a text colour (lighter in
       dark mode so it stays legible) */
    --accent:         #4F46E5;
    --accent-rgb:     79, 70, 229;
    --on-accent-rgb:  255, 255, 255;
    --ink:            #111114;
    --ink-rgb:        17, 17, 20;
    --ink-deep:       #050507;
    --on-ink:         #FFFFFF;
    --on-ink-rgb:     255, 255, 255;
    --brand-text:     #4F46E5;
    --brand-text-rgb: 79, 70, 229;

    /* Tokens that never flip: text on a coloured button (white in both
       modes), the ink of every shadow, and the darker green of the
       modal's success check */
    --on-accent:    #FFFFFF;
    --shadow-rgb:   0, 0, 0;
    --green-strong: #15803D;

    /* Error messages and the edge of an invalid control; flips with the
       mode */
    --error-text: #B91C1C;

    /* The top bar and the form fields: one step off the canvas and the
       cards, lighter in light mode and darker in dark mode */
    --chrome: #F3F3F3;
    --field:  #FFFFFF;

    /* Neutrals replacing the style.css defaults: soft #3B3B3B ink, an
       #F8F8F8 canvas, pure white cards, #E5E5E5 dividers */
    --black:  #3B3B3B;   --black-rgb:  59, 59, 59;
    --white:  #FFFFFF;   --white-rgb:  255, 255, 255;
    --dark:   #505050;   --dark-rgb:   80, 80, 80;
    --gray:   #616161;   --gray-rgb:   97, 97, 97;
    --silver: #E5E5E5;   --silver-rgb: 229, 229, 229;
    --light:  #F8F8F8;   --light-rgb:  248, 248, 248;
}

/* Dark mode - layered grays: #181818 chrome, a #1F1F1F canvas, #252526
   cards, #313131 fields, #2B2B2B dividers and #CCCCCC text. Keep the three
   blocks in sync: body.dark is the mode switch, the media query is the OS
   preference, body.light overrides a dark OS preference. The derived
   tokens (--brand, --border) are repeated on body because var() inside a
   custom property resolves where the property is declared. */
body.dark {
    --black:  #CCCCCC;   --black-rgb:  204, 204, 204;
    --white:  #252526;   --white-rgb:  37, 37, 38;
    --dark:   #B4B4B4;   --dark-rgb:   180, 180, 180;
    --gray:   #9D9D9D;   --gray-rgb:   157, 157, 157;
    --silver: #2B2B2B;   --silver-rgb: 43, 43, 43;
    --light:  #1F1F1F;   --light-rgb:  31, 31, 31;

    --brand:     var(--black);
    --brand-rgb: var(--black-rgb);
    --border:    rgba(var(--black-rgb), .10);

    --ink:            #0B0B0E;
    --ink-rgb:        11, 11, 14;
    --brand-text:     #A5B4FC;
    --brand-text-rgb: 165, 180, 252;

    --chrome: #181818;
    --field:  #313131;

    --error-text: #F87171;
}

@media (prefers-color-scheme: dark) {
    :root {
        --black:  #CCCCCC;   --black-rgb:  204, 204, 204;
        --white:  #252526;   --white-rgb:  37, 37, 38;
        --dark:   #B4B4B4;   --dark-rgb:   180, 180, 180;
        --gray:   #9D9D9D;   --gray-rgb:   157, 157, 157;
        --silver: #2B2B2B;   --silver-rgb: 43, 43, 43;
        --light:  #1F1F1F;   --light-rgb:  31, 31, 31;

        --brand:     var(--black);
        --brand-rgb: var(--black-rgb);
        --border:    rgba(var(--black-rgb), .10);

        --ink:            #0B0B0E;
        --ink-rgb:        11, 11, 14;
        --brand-text:     #A5B4FC;
        --brand-text-rgb: 165, 180, 252;

        --chrome: #181818;
        --field:  #313131;

        --error-text: #F87171;
    }
}

/* Explicit light mode: the page opens with body.light (index.php), so it
   is light until the visitor picks dark; the values mirror :root */
body.light {
    --black:  #3B3B3B;   --black-rgb:  59, 59, 59;
    --white:  #FFFFFF;   --white-rgb:  255, 255, 255;
    --dark:   #505050;   --dark-rgb:   80, 80, 80;
    --gray:   #616161;   --gray-rgb:   97, 97, 97;
    --silver: #E5E5E5;   --silver-rgb: 229, 229, 229;
    --light:  #F8F8F8;   --light-rgb:  248, 248, 248;

    --brand:     var(--black);
    --brand-rgb: var(--black-rgb);
    --border:    rgba(var(--black-rgb), .12);

    --ink:            #111114;
    --ink-rgb:        17, 17, 20;
    --brand-text:     #4F46E5;
    --brand-text-rgb: 79, 70, 229;

    --chrome: #F3F3F3;
    --field:  #FFFFFF;

    --error-text: #B91C1C;
}

/* -----------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3 {
    letter-spacing: -0.01em;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
}

/* Vertical rhythm (style.css only gives text blocks 8px) */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 16px;
}

p {
    margin-bottom: 12px;
}

/* -----------------------------------------------------------------------------
   3. BUTTONS - solid ink, hairline border, layered hover instead of the
   style.css opacity fade
   -------------------------------------------------------------------------- */

button,
.button {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: var(--white); /* inverts with --brand, so it works in both modes */
    padding: 8px 16px;
    border-radius: var(--radius);
    letter-spacing: .01em;
    transition: background-color .15s ease, border-color .15s ease;
}

/* A translucent --white veil lightens the ink button in light mode and
   dims the inverted button in dark mode - one rule for both */
button:not([disabled]):hover,
.button:not([disabled]):hover {
    opacity: 1;
    background-image: linear-gradient(rgba(var(--white-rgb), .14), rgba(var(--white-rgb), .14));
}

button:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Secondary: quiet surface button with a hairline edge */
button.button-alt,
.button.button-alt {
    background: var(--white);
    border-color: rgba(var(--black-rgb), .15);
    color: var(--black);
}

button.button-alt:not([disabled]):hover,
.button.button-alt:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--black-rgb), .04), rgba(var(--black-rgb), .04));
    border-color: rgba(var(--black-rgb), .3);
}

/* -----------------------------------------------------------------------------
   4. SURFACES AND FORMS
   -------------------------------------------------------------------------- */

/* Soft canvas behind the content; cards sit on --white, the top bar on
   --chrome. All three flip in dark mode. */
body {
    background: var(--light);
}

.header {
    background: var(--chrome);
}

.footer p {
    color: var(--gray);
    font-size: .85rem;
}

.custom-container > h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.custom-container > h3 {
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
}

/* site.js sets .input-invalid on a field that fails validation */
/* The input selector repeats the :not() list of the input rule below, so
   the red edge outweighs its hairline border */
input.input-invalid:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select.input-invalid,
textarea.input-invalid {
    border-color: var(--error-text);
}

form + p,
button + p,
.button + p {
    margin-top: 16px;
}

.wrapper > :last-child {
    margin-bottom: 0;
}

/* Inputs: hairline border, rounded, ink focus ring */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    border: 1px solid rgba(var(--black-rgb), .14);
    border-radius: var(--radius);
    background: var(--field);
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}

pre {
    border-radius: var(--radius);
}

/* Button rows: a wrapping flex row where each action spaces itself with
   sibling margins, 8px apart in both directions */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
}

.form-actions > * {
    margin-inline-end: 8px;
    margin-top: 8px;
}

/* -----------------------------------------------------------------------------
   5. PAGE - smooth anchor scrolling, sections clear the sticky header
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

main > section {
    padding-top: 64px;
    padding-bottom: 64px;
    scroll-margin-top: 72px;
}

main > section + section {
    border-top: 1px solid var(--border);
}

/* Small uppercase label above a heading */
.eyebrow {
    margin: 0 0 12px;
    color: var(--brand);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Muted intro paragraph under a heading */
.lead {
    color: var(--gray);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Section intro block: eyebrow, h2, lead - kept narrow for reading */
.section-heading {
    max-width: 640px;
    margin-bottom: 40px;
}

.section-heading h2 {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.2;
}

.section-heading .lead {
    margin-bottom: 0;
}

/* Card grid - no gap. Row > .custom-column > .inner-column > content:
   the column only takes its exact share of the row (style.css stacks it
   at 100% on mobile, the media queries below take it to 50% and
   33.333%) and carries no padding; the .inner-column pads by 8px, half
   of the 16px gutter on every side, and the row's -8px margin takes the
   outer half back so the content sits flush with the container. Inside
   goes a .wrapper card or plain content. Column and inner column are
   flex boxes, so every card in a row fills the same height. */
.card-grid {
    margin: -8px;
}

.card-grid > .custom-column {
    display: flex;
}

.card-grid > .custom-column > .inner-column {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
}

.card-grid > .custom-column > .inner-column > .wrapper {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}

.card-grid h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.card-grid p {
    margin: 0;
    color: var(--gray);
    font-size: .95rem;
}

@media (min-width: 768px) {
    .card-grid > .custom-column {
        flex: 1 1 50%;
    }
}

@media (min-width: 1024px) {
    .card-grid > .custom-column {
        flex-basis: 33.333%;
    }
}

/* Small category pill */
.tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--gray);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tag-infra {
    border-color: transparent;
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
}

/* Header: the style.css top bar, made sticky with a hairline */
.header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--border);
}

.header nav li a {
    color: var(--dark);
    font-size: .9rem;
    font-weight: 500;
}

/* #hero: copy beside a visual, stacked on mobile */
#hero {
    padding-top: 80px;
}

#hero .custom-row {
    align-items: center;
}

#hero h1 {
    margin-top: 0;
    font-size: 2.1rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

@media (min-width: 768px) {
    #hero h1 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    #hero h1 {
        font-size: 3.25rem;
    }
}

#hero .lead {
    max-width: 560px;
    margin-bottom: 24px;
}

#hero .form-actions {
    margin-top: 0;
}

/* Call-to-action band, painted with --brand and --white so it stays
   high-contrast in both modes */
.cta-band {
    padding: 56px 24px;
    border-radius: var(--radius-lg);
    background: var(--brand);
    color: var(--white);
}

.cta-band h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

.cta-band p {
    max-width: 560px;
    margin: 0 auto 8px;
    font-size: 1.05rem;
    opacity: .8;
}

.cta-band .form-actions {
    justify-content: center;
}

.cta-band .form-actions > * {
    margin-inline: 4px;
}

.cta-link {
    padding: 8px 16px;
    color: var(--white);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(var(--white-rgb), .5);
}

.cta-link:hover {
    text-decoration-color: var(--white);
}

/* Footer: the style.css two-column footer, quiet links */
.footer {
    padding: 32px 0;
    border-top: 1px solid var(--border);
}

.footer .styled-list a {
    color: var(--gray);
    font-size: .85rem;
    transition: color .15s ease;
}

.footer .styled-list a:hover {
    color: var(--black);
}

/* =============================================================================
   6. SITE
   =============================================================================
   Every colour comes from the tokens of section 1 (the neutrals, --brand,
   and the studio's --accent, --ink and --brand-text), which flip with the
   mode switch.

   Motion: sections and cards carry .reveal and fade in when site.js sees
   them enter the viewport; the hero mockup floats; numbers count up. All
   of it is switched off under prefers-reduced-motion at the end.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

button,
.button {
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.button:not([disabled]):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(var(--black-rgb), .5);
}

/* Accent button: the loud one, for every call to action */
.button.button-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 16px 32px -12px rgba(var(--accent-rgb), .7);
}

.button.button-accent:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--on-accent-rgb), .1), rgba(var(--on-accent-rgb), .1));
    box-shadow: 0 20px 40px -12px rgba(var(--accent-rgb), .8);
}

/* Ghost button: translucent, sits next to the accent one on the ink stage */
.button.button-ghost {
    background: rgba(var(--on-ink-rgb), .1);
    border-color: rgba(var(--on-ink-rgb), .35);
    color: var(--on-ink);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.button.button-ghost:not([disabled]):hover {
    background: rgba(var(--on-ink-rgb), .18);
    border-color: rgba(var(--on-ink-rgb), .6);
    box-shadow: none;
}

.button-lg {
    padding: 14px 24px;
    font-size: 1rem;
}

/* Sections: generous rhythm, backgrounds instead of hairlines */
main > section {
    padding-top: 56px;
    padding-bottom: 56px;
}

@media (min-width: 768px) {
    main > section {
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

main > section + section {
    border-top: 0;
}

#servicos,
#como-funciona,
#sobre {
    background: var(--white);
}

#sites,
#projetos,
#promessa,
#contacto {
    background: var(--light);
}

#promessa {
    padding-top: 0;
}

.section-heading {
    max-width: 720px;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .section-heading {
        margin-bottom: 56px;
    }
}

.section-heading h2 {
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -.025em;
}

@media (min-width: 768px) {
    .section-heading h2 {
        font-size: 2.15rem;
    }
}

@media (min-width: 1024px) {
    .section-heading h2 {
        font-size: 2.75rem;
    }
}

@media (min-width: 1280px) {
    .section-heading h2 {
        font-size: 3rem;
    }
}

.section-heading .lead,
.lead {
    font-size: 1.15rem;
    line-height: 1.6;
}

.section-more {
    margin: 40px 0 0;
    text-align: center;
}

/* Eyebrow: a pill with an accent dot. The line box is the font size so
   the caps sit centred between the paddings, and the end padding gives
   back the letter-spacing that trails the last letter. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 9px 14px 7px;
    padding-inline-end: calc(14px - .1em);
    border-radius: 999px;
    background: rgba(var(--brand-text-rgb), .1);
    color: var(--brand-text);
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .1em;
}

/* The dot sits on the caps' centre, one pixel above the padded box's
   centre, since the padding above is the larger one */
.eyebrow::before {
    position: relative;
    top: -1px;
}

.eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: var(--brand-text);
}

.micro-label {
    display: block;
    margin-bottom: 8px;
    color: var(--gray);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--on-ink);
    font-family: var(--headings-font);
    font-size: .8rem;
    font-weight: 700;
}

.brand-name {
    margin-inline-start: 8px;
    font-family: var(--headings-font);
    font-size: .85rem;
    font-weight: 700;
}

.not-found {
    max-width: 640px;
    padding-top: 64px;
}

/* Card grids: softer corners, hover lift */
.card-grid > .custom-column > .inner-column > .wrapper {
    position: relative;
    padding: 24px;
    border-radius: var(--radius-xl);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

@media (min-width: 768px) {
    .card-grid > .custom-column > .inner-column > .wrapper {
        padding: 32px;
    }
}

.card-grid > .custom-column > .inner-column > .wrapper:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-rgb), .4);
    box-shadow: 0 32px 48px -32px rgba(var(--accent-rgb), .45);
}

.card-grid h3 {
    font-size: 1.25rem;
    letter-spacing: -.01em;
}

/* Scroll reveal: hidden until site.js marks the element visible, with a
   small stagger between siblings */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }
.reveal:nth-child(5) { transition-delay: .4s; }
.reveal:nth-child(6) { transition-delay: .5s; }
.reveal:nth-child(7) { transition-delay: .6s; }

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-60px, 40px) scale(1.15);
    }
    100% {
        transform: translate(40px, -30px) scale(.95);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0);
    }
}

/* -----------------------------------------------------------------------------
   Hero: ink stage with drifting glows, copy, the mockups and three numbers
   -------------------------------------------------------------------------- */

#hero.site-hero {
    position: relative;
    overflow: hidden;
    padding-top: 56px;
    padding-bottom: 64px;
    background:
        radial-gradient(rgba(var(--on-ink-rgb), .1) 1px, transparent 1.5px) 0 0 / 28px 28px,
        radial-gradient(900px 600px at 100% 0%, rgba(var(--accent-rgb), .45), transparent 65%),
        linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
    color: var(--on-ink);
}

@media (min-width: 768px) {
    #hero.site-hero {
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

.site-hero::before,
.site-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: drift 18s ease-in-out infinite alternate;
}

.site-hero::before {
    top: -240px;
    inset-inline-end: -160px;
    width: 640px;
    height: 640px;
    background: rgba(var(--accent-rgb), .55);
}

.site-hero::after {
    bottom: -280px;
    inset-inline-start: -200px;
    width: 560px;
    height: 560px;
    background: rgba(var(--accent-rgb), .25);
    animation-delay: -9s;
}

.site-hero .custom-container {
    position: relative;
    z-index: 1;
}

#hero.site-hero .eyebrow {
    background: rgba(var(--on-ink-rgb), .12);
    border: 1px solid rgba(var(--on-ink-rgb), .18);
    color: var(--on-ink);
}

#hero.site-hero .eyebrow::before {
    background: var(--accent);
    animation: pulse 2s ease-out infinite;
}

#hero.site-hero h1 {
    margin-bottom: 24px;
    font-size: 2.5rem;
    line-height: 1.02;
    letter-spacing: -.035em;
}

@media (min-width: 768px) {
    #hero.site-hero h1 {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    #hero.site-hero h1 {
        font-size: 3.9rem;
    }
}

@media (min-width: 1280px) {
    #hero.site-hero h1 {
        font-size: 4.25rem;
    }
}

#hero.site-hero .lead {
    max-width: 560px;
    margin-bottom: 32px;
    color: rgba(var(--on-ink-rgb), .82);
    font-size: 1.2rem;
}

.hero-copy > * {
    animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
}

.hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero-copy > :nth-child(4) { animation-delay: .3s; }
.hero-copy > :nth-child(5) { animation-delay: .4s; }

.hero-promises {
    display: flex;
    flex-wrap: wrap;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.hero-promises li {
    display: inline-flex;
    align-items: center;
    margin: 0 24px 8px 0;
    color: rgba(var(--on-ink-rgb), .85);
    font-size: .9rem;
    font-weight: 500;
}

.hero-promises li::before {
    content: '\2713';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .3);
    color: var(--on-ink);
    font-size: .7rem;
    font-weight: 700;
}

.hero-mockup {
    margin-top: 64px;
}

/* Three numbers under the hero, separated by hairlines */
/* Stacked on phones, one hairline between them; side by side from 768px,
   separated by vertical hairlines */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    margin: 48px 0 0;
    padding: 32px 0 0;
    border-top: 1px solid rgba(var(--on-ink-rgb), .15);
    list-style: none;
}

@media (min-width: 768px) {
    .hero-stats {
        margin-top: 72px;
    }
}

.hero-stats li {
    flex: 0 0 100%;
    min-width: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(var(--on-ink-rgb), .12);
}

@media (min-width: 768px) {
    .hero-stats li {
        flex: 1 1 0;
        padding: 0 24px;
        border-top: 0;
        border-inline-start: 1px solid rgba(var(--on-ink-rgb), .15);
    }
}

.hero-stats li:first-child {
    border-top: 0;
}

@media (min-width: 768px) {
    .hero-stats li:first-child {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

.hero-stats strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--headings-font);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .hero-stats strong {
        font-size: 2.5rem;
    }
}

.hero-stats li > span {
    display: block;
    color: rgba(var(--on-ink-rgb), .7);
    font-size: .9rem;
}

/* The copy and the mockup stay stacked on tablets (the mockup needs the
   room) and sit side by side from 1024px */
@media (min-width: 768px) {
    .site-hero .hero-copy,
    .hero-mockup {
        flex: 1 1 100%;
    }

    .site-hero .hero-copy {
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    .site-hero .hero-copy {
        flex: 1 1 0;
        padding-inline-end: 64px;
    }

    .hero-mockup {
        flex: 1.35 1 0;
        min-width: 0;
        margin-top: 0;
    }
}

/* -----------------------------------------------------------------------------
   Mockups: a sample site on a browser frame and on a phone
   -------------------------------------------------------------------------- */

.mockup-stage {
    position: relative;
    padding-bottom: 56px;
    animation: rise 1s .35s cubic-bezier(.2, .7, .2, 1) both, float 8s 1.4s ease-in-out infinite;
}

@media (min-width: 768px) {
    .mockup-stage {
        padding-bottom: 88px;
        padding-inline-start: 168px;
    }
}

/* Tilted in perspective from 768px, flat on phones */
.mockup {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--on-ink-rgb), .25);
    border-radius: 16px;
    background: var(--white);
    color: var(--black);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
    .mockup {
        transform: perspective(1800px) rotateY(-7deg) rotateX(2deg);
    }
}

.mockup-stage:hover .mockup {
    transform: perspective(1800px) rotateY(0) rotateX(0);
}

.mockup-bar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--light);
}

.mockup-dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-inline-end: 6px;
    border-radius: 50%;
    background: var(--rose);
}

.mockup-dots span:nth-child(2) {
    background: var(--amber);
}

.mockup-dots span:nth-child(3) {
    background: var(--green);
}

.mockup-url {
    flex: 1 1 auto;
    margin-inline-start: 12px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--gray);
    font-size: .75rem;
}

.mockup-url::before {
    content: '\1F512';
    margin-inline-end: 6px;
    font-size: .65rem;
}

.mockup-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}

.mockup-links {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mockup-links li {
    margin-inline-start: 16px;
    color: var(--dark);
    font-size: .7rem;
    font-weight: 500;
}

.mockup-links li:last-child {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
}

.mockup-hero {
    position: relative;
    overflow: hidden;
    margin: 0 12px;
    padding: 36px 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ink), var(--ink-deep));
    color: var(--on-ink);
}

.mockup-hero::after {
    content: '';
    position: absolute;
    top: -56px;
    inset-inline-end: -56px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--accent), rgba(var(--accent-rgb), .6));
}

.mockup-hero::before {
    content: '';
    position: absolute;
    bottom: -40px;
    inset-inline-end: 96px;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(var(--on-ink-rgb), .25);
    border-radius: 50%;
}

.mockup-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 58%;
}

.mockup-title {
    margin: 0 0 8px;
    font-family: var(--headings-font);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.mockup-text {
    margin: 0 0 16px;
    font-size: .8rem;
    line-height: 1.5;
    opacity: .85;
}

.mockup-button {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .75rem;
    font-weight: 700;
}

.mockup-gallery {
    display: flex;
    padding: 12px 12px 0;
}

.mockup-cards {
    display: flex;
    padding: 12px;
}

.mockup-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--gray);
    font-size: .7rem;
}

.mockup-card + .mockup-card {
    margin-inline-start: 8px;
}

.mockup-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--black);
    font-family: var(--headings-font);
    font-size: .8rem;
}

/* Photo placeholders: a tinted panel with a picture icon, standing in for
   the photographs a real site would carry */
.photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background:
        repeating-linear-gradient(135deg, transparent 0 10px, rgba(var(--white-rgb), .25) 10px 12px),
        linear-gradient(135deg, rgba(var(--ink-rgb), .14), rgba(var(--accent-rgb), .4));
    color: rgba(var(--ink-rgb), .5);
}

.photo svg {
    width: 28px;
    height: 28px;
}

.photo-caption {
    position: absolute;
    bottom: 6px;
    inset-inline-start: 6px;
    max-width: calc(100% - 12px);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(var(--white-rgb), .88);
    color: var(--dark);
    font-size: .58rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-hero {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    z-index: 1;
    width: 34%;
    height: calc(100% - 48px);
    border: 1px solid rgba(var(--on-ink-rgb), .3);
    background:
        repeating-linear-gradient(135deg, transparent 0 10px, rgba(var(--on-ink-rgb), .08) 10px 12px),
        linear-gradient(135deg, rgba(var(--on-ink-rgb), .22), rgba(var(--accent-rgb), .5));
    color: rgba(var(--on-ink-rgb), .8);
    transform: rotate(3deg);
}

.photo-tile {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 4 / 3;
}

.photo-tile + .photo-tile {
    margin-inline-start: 8px;
}

.photo-thumb {
    display: flex;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 6px;
}

.photo-thumb svg {
    width: 18px;
    height: 18px;
}

.photo-phone {
    aspect-ratio: 16 / 9;
    margin-bottom: 10px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(135deg, transparent 0 8px, rgba(var(--on-ink-rgb), .08) 8px 10px),
        linear-gradient(135deg, rgba(var(--on-ink-rgb), .22), rgba(var(--accent-rgb), .5));
    color: rgba(var(--on-ink-rgb), .8);
}

.photo-phone svg {
    width: 18px;
    height: 18px;
}

.photo-phone .photo-caption {
    font-size: .5rem;
}

/* Phone: the same site as a visitor sees it on a mobile, overlapping the
   bottom start corner of the browser frame. The screen keeps a real
   phone's proportions and cuts the page off at the bottom. On phones it
   is smaller and overlaps the bottom end corner instead. */
.mockup-phone {
    position: absolute;
    bottom: 0;
    inset-inline-end: -8px;
    z-index: 2;
    width: 148px;
    margin: 0;
    padding: 7px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--ink);
    color: var(--black);
    animation: rise 1s .6s cubic-bezier(.2, .7, .2, 1) both;
}

@media (min-width: 768px) {
    .mockup-phone {
        inset-inline-start: 0;
        inset-inline-end: auto;
        width: 208px;
        padding: 10px;
        border-radius: 32px;
    }
}

.phone-screen {
    aspect-ratio: 9 / 18.5;
    overflow: hidden;
    border-radius: 18px;
    background: var(--white);
}

@media (min-width: 768px) {
    .phone-screen {
        border-radius: 24px;
    }
}

.phone-status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
}

.phone-status::before {
    content: '';
    width: 48px;
    height: 6px;
    border-radius: 3px;
    background: var(--ink);
}

.phone-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 8px;
}

.phone-nav .monogram {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: .55rem;
}

.phone-nav .brand-name {
    margin-inline-start: 4px;
    font-size: .55rem;
}

.phone-menu {
    width: 14px;
}

.phone-menu span {
    display: block;
    height: 2px;
    margin: 2px 0;
    border-radius: 1px;
    background: var(--dark);
}

.phone-hero {
    margin: 0 6px;
    padding: 16px 12px;
    border-radius: 10px;
    background: linear-gradient(150deg, var(--ink), var(--ink-deep));
    color: var(--on-ink);
}

.phone-title {
    margin: 0 0 8px;
    font-family: var(--headings-font);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.15;
}

.phone-button {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .55rem;
    font-weight: 700;
}

.phone-cards {
    padding: 6px 6px 8px;
}

.phone-card {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--gray);
    font-size: .55rem;
    line-height: 1.3;
}

.phone-card + .phone-card {
    margin-top: 6px;
}

.phone-card strong {
    display: block;
    color: var(--black);
    font-family: var(--headings-font);
    font-size: .6rem;
}

/* Small phones (under 480px) keep the sample site to its essentials */
@media (max-width: 479px) {
    .mockup-links {
        display: none;
    }

    .mockup-hero-copy {
        max-width: 100%;
    }

    .mockup-hero::after,
    .photo-hero {
        display: none;
    }

    .photo-tile:nth-child(n+3) {
        display: none;
    }

    .mockup-cards {
        display: block;
    }

    .mockup-card + .mockup-card {
        margin-inline-start: 0;
        margin-top: 8px;
    }

    .mockup-card:last-child {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
   Services: three cards with a faded index, a points list and a button
   -------------------------------------------------------------------------- */

.card-grid > .custom-column > .inner-column > .service-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    .card-grid > .custom-column > .inner-column > .service-card {
        padding: 44px 36px 36px;
    }
}

/* Four services read as two by two, not three and an orphan */
@media (min-width: 1024px) {
    .service-grid > .custom-column:first-child:nth-last-child(4),
    .service-grid > .custom-column:first-child:nth-last-child(4) ~ .custom-column {
        flex-basis: 50%;
    }
}

.card-grid .service-card > p {
    margin-bottom: 0;
    line-height: 1.65;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--ink), var(--accent));
}

.service-index {
    position: absolute;
    top: 20px;
    inset-inline-end: 28px;
    color: rgba(var(--accent-rgb), .14);
    font-family: var(--headings-font);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    pointer-events: none;
}

.card-grid .service-card h3 {
    position: relative;
    margin-bottom: 12px;
    padding-top: 16px;
    padding-inline-end: 72px;
    font-size: 1.4rem;
}

/* Written with the element so it outranks ul.styled-list in style.css */
ul.service-points {
    margin: 32px 0 36px;
}

.service-points li {
    position: relative;
    padding: 14px 0;
    padding-inline-start: 32px;
    border-top: 1px solid var(--border);
    color: var(--dark);
    font-size: .92rem;
    line-height: 1.55;
}

.service-points li::before {
    content: '\2713';
    position: absolute;
    top: 14px;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .12);
    color: var(--brand-text);
    font-size: .65rem;
    font-weight: 700;
}

.service-cta {
    margin-top: auto;
}

/* -----------------------------------------------------------------------------
   Sites: what every site includes (tiles on the left) and an index of the
   industry examples (rows on the right)
   -------------------------------------------------------------------------- */

/* Stacked up to 1024px, side by side from there */
.sites-row {
    display: block;
}

@media (min-width: 1024px) {
    .sites-row {
        display: flex;
        align-items: flex-start;
    }
}

.sites-includes {
    flex: 1 1 0;
    min-width: 0;
}

.sites-includes .micro-label,
.sites-index .micro-label {
    margin-bottom: 16px;
}

.sites-include-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.sites-include {
    display: flex;
    flex: 0 0 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .sites-include {
        flex-basis: 50%;
    }
}

.sites-include > .inner-column {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px 16px;
}

.sites-include-inner {
    position: relative;
    height: 100%;
    padding: 24px;
    padding-top: 56px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.sites-include:hover .sites-include-inner {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), .4);
    box-shadow: 0 24px 40px -28px rgba(var(--accent-rgb), .5);
}

.include-index {
    position: absolute;
    top: 20px;
    inset-inline-start: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), .12);
    color: var(--brand-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.sites-include strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--headings-font);
    font-size: 1.1rem;
    letter-spacing: -.01em;
}

.sites-include p {
    margin: 0;
    color: var(--gray);
    font-size: .92rem;
    line-height: 1.55;
}

.sites-index {
    flex: 0 0 440px;
    margin: 24px 0 0;
    padding: 24px 20px;
    border-radius: var(--radius-xl);
    background: var(--ink);
    color: var(--on-ink);
}

@media (min-width: 768px) {
    .sites-index {
        padding: 32px;
    }
}

@media (min-width: 1024px) {
    .sites-index {
        margin: 0;
        margin-inline-start: 48px;
    }
}

.sites-index .micro-label {
    color: rgba(var(--on-ink-rgb), .6);
}

.sites-index-list {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.sites-index-list li {
    list-style: none;
}

.sites-index-list li a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid rgba(var(--on-ink-rgb), .12);
    color: var(--on-ink);
    transition: padding-inline-start .2s ease;
}

.sites-index-list li:last-child a {
    border-bottom: 1px solid rgba(var(--on-ink-rgb), .12);
}

.sites-index-list li a:hover {
    padding-inline-start: 8px;
    text-decoration: none;
}

.index-name {
    flex: 1 1 auto;
    font-family: var(--headings-font);
    font-weight: 700;
}

.index-arrow {
    flex: 0 0 auto;
    margin-inline-start: 16px;
    color: var(--accent);
    font-weight: 700;
    transition: transform .2s ease;
}

.sites-index-list li a:hover .index-arrow {
    transform: translateX(4px);
}

/* The example's headline, one quiet line under the name and the arrow */
.index-headline {
    flex: 0 0 100%;
    order: 2;
    margin-top: 2px;
    color: rgba(var(--on-ink-rgb), .6);
    font-size: .85rem;
    line-height: 1.4;
}

.sites-index .button {
    width: 100%;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   Free proposal offer: an ink panel with the today / tomorrow pairs on the
   left and the two-field form on a white card on the right
   -------------------------------------------------------------------------- */

#proposta-gratis {
    background: var(--white);
}

/* Stacked up to 1024px, the copy and the form side by side from there */
.offer {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 24px 20px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(rgba(var(--on-ink-rgb), .1) 1px, transparent 1.5px) 0 0 / 28px 28px,
        radial-gradient(700px 500px at 100% 0%, rgba(var(--accent-rgb), .45), transparent 65%),
        linear-gradient(160deg, var(--ink), var(--ink-deep));
    color: var(--on-ink);
    box-shadow: 0 48px 96px -48px rgba(var(--ink-rgb), .8);
}

@media (min-width: 768px) {
    .offer {
        padding: 40px;
    }
}

@media (min-width: 1024px) {
    .offer {
        display: flex;
        align-items: flex-start;
        padding: 56px;
    }
}

.offer-copy {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 32px;
}

@media (min-width: 1024px) {
    .offer-copy {
        margin-bottom: 0;
        padding-inline-end: 56px;
    }
}

.offer .section-heading {
    margin-bottom: 32px;
}

.offer .section-heading .eyebrow {
    background: rgba(var(--on-ink-rgb), .12);
    border: 1px solid rgba(var(--on-ink-rgb), .18);
    color: var(--on-ink);
}

.offer .section-heading .eyebrow::before {
    background: var(--accent);
}

.offer .section-heading .lead {
    color: rgba(var(--on-ink-rgb), .8);
}

/* Column labels above the pairs, from 768px where the pairs sit side by
   side */
.offer-labels {
    display: none;
    margin-bottom: 8px;
}

@media (min-width: 768px) {
    .offer-labels {
        display: flex;
    }
}

.offer-labels span {
    flex: 1 1 0;
    padding-inline-start: 36px;
    color: rgba(var(--on-ink-rgb), .55);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.offer-labels span + span {
    margin-inline-start: 24px;
}

/* Today above tomorrow on phones, side by side from 768px */
.offer-pair {
    display: block;
    padding: 16px 0;
    border-top: 1px solid rgba(var(--on-ink-rgb), .12);
}

@media (min-width: 768px) {
    .offer-pair {
        display: flex;
    }
}

.offer-before,
.offer-after {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    padding-inline-start: 36px;
    font-size: .95rem;
    line-height: 1.5;
}

.offer-before {
    color: rgba(var(--on-ink-rgb), .6);
}

.offer-after {
    margin: 8px 0 0;
    color: var(--on-ink);
    font-weight: 500;
}

@media (min-width: 768px) {
    .offer-after {
        margin: 0;
        margin-inline-start: 24px;
    }
}

.offer-mark {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
}

.offer-before .offer-mark {
    background: rgba(var(--rose-rgb), .25);
    color: var(--rose);
}

.offer-after .offer-mark {
    background: var(--accent);
    color: var(--on-accent);
}

/* The form card */
.offer-form {
    position: relative;
    flex: 0 0 400px;
    padding: 24px 20px;
    border-radius: 16px;
    background: var(--white);
    color: var(--black);
}

@media (min-width: 768px) {
    .offer-form {
        padding: 32px;
    }
}

.offer-form h3 {
    margin: 0 0 20px;
    font-size: 1.4rem;
    letter-spacing: -.02em;
}

.offer-form label {
    margin-bottom: 6px;
    font-size: .85rem;
    font-weight: 600;
}

.offer-form .button {
    width: 100%;
    text-align: center;
}

.offer-form .offer-note {
    margin: 12px 0 0;
    color: var(--gray);
    font-size: .8rem;
    text-align: center;
}

/* After sending, the success message covers the card */
.offer-success {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    border-radius: 16px;
    background: var(--white);
    text-align: center;
}

.offer-success strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--headings-font);
    font-size: 1.4rem;
}

.offer-success p {
    margin: 0;
    color: var(--gray);
}

/* The round check above the success message */
.offer-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(var(--green-rgb), .12);
    color: var(--green);
    font-size: 1.75rem;
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   Process: a timeline with numbered stops
   -------------------------------------------------------------------------- */

/* On phones the stops run down the page, each dot beside its text, with
   the rail going down from one dot to the next; from 768px they sit in a
   row and the rail runs across */
.timeline {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .timeline {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -12px;
    }
}

.timeline-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.timeline-step > .inner-column {
    display: flex;
    padding: 0 0 32px;
}

@media (min-width: 768px) {
    .timeline-step > .inner-column {
        display: block;
        padding: 0 12px;
    }
}

.step-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin: 0 20px 0 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ink), var(--ink-deep));
    color: var(--on-ink);
    font-family: var(--headings-font);
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .12), 0 16px 32px -16px rgba(var(--ink-rgb), .7);
}

@media (min-width: 768px) {
    .step-dot {
        margin: 0 0 20px;
    }
}

.timeline-step::before {
    content: '';
    position: absolute;
    top: 48px;
    inset-inline-start: 23px;
    width: 2px;
    height: calc(100% - 48px);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .5), rgba(var(--accent-rgb), .1));
}

@media (min-width: 768px) {
    .timeline-step::before {
        top: 23px;
        inset-inline-start: 60px;
        width: calc(100% - 48px);
        height: 2px;
        background: linear-gradient(90deg, rgba(var(--accent-rgb), .5), rgba(var(--accent-rgb), .1));
    }
}

.timeline-step:last-child::before {
    display: none;
}

.step-when {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(var(--brand-text-rgb), .1);
    color: var(--brand-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.timeline-step h3 {
    margin: 0 0 8px;
    font-size: 1.3rem;
    letter-spacing: -.01em;
}

.timeline-step p {
    margin: 0;
    color: var(--gray);
    line-height: 1.6;
}

@media (min-width: 768px) {
    .timeline-step p {
        padding-inline-end: 16px;
    }
}

/* -----------------------------------------------------------------------------
   Projects
   -------------------------------------------------------------------------- */

.project-card {
    display: flex;
    flex-direction: column;
}

.project-card .tag {
    align-self: flex-start;
}

.project-card p {
    flex: 1 1 auto;
}

.project-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--brand-text);
    font-size: .9rem;
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   Ownership promise: a tinted panel, the title on the left and the three
   points on the right
   -------------------------------------------------------------------------- */

.ownership {
    display: block;
    padding: 24px 20px;
    border: 1px solid rgba(var(--accent-rgb), .25);
    border-radius: var(--radius-xl);
    background: rgba(var(--accent-rgb), .07);
}

@media (min-width: 768px) {
    .ownership {
        padding: 48px;
    }
}

@media (min-width: 1024px) {
    .ownership {
        display: flex;
        flex-wrap: wrap;
    }
}

.ownership-head {
    flex: 0 0 360px;
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .ownership-head {
        margin-bottom: 0;
        padding-inline-end: 48px;
    }
}

.ownership-head h2 {
    margin: 0 0 12px;
    font-size: 1.9rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.ownership-head p {
    margin: 0;
    color: var(--gray);
}

/* The eyebrow is a p too; it keeps its room above the heading */
.ownership-head .eyebrow {
    margin-bottom: 20px;
}

/* The points stack on phones and sit in a row from 768px */
.ownership-list {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .ownership-list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -12px;
    }
}

.ownership-list li {
    flex: 1 1 0;
    min-width: 0;
}

.ownership-list > li > .inner-column {
    position: relative;
    padding: 0;
    padding-inline-start: 40px;
}

.ownership-list > li + li > .inner-column {
    margin-top: 20px;
}

@media (min-width: 768px) {
    .ownership-list > li > .inner-column {
        padding: 0 12px;
        padding-inline-start: 48px;
    }

    .ownership-list > li + li > .inner-column {
        margin-top: 0;
    }
}

.ownership-check {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .8rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .ownership-check {
        inset-inline-start: 12px;
    }
}

.ownership-list strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--headings-font);
    font-size: 1.05rem;
}

.ownership-list p {
    margin: 0;
    color: var(--gray);
    font-size: .92rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   FAQ: native disclosure widgets, one card each
   -------------------------------------------------------------------------- */

#perguntas {
    background: var(--white);
}

.faq-list {
    max-width: 800px;
}

.faq-item {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--light);
    transition: border-color .2s ease, background-color .2s ease;
}

.faq-item[open] {
    border-color: rgba(var(--accent-rgb), .4);
    background: var(--white);
}

.faq-item summary {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    font-family: var(--headings-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    list-style: none;
    cursor: pointer;
}

@media (min-width: 768px) {
    .faq-item summary {
        padding: 20px 24px;
        font-size: 1.1rem;
    }
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary > span:first-child {
    flex: 1 1 auto;
}

/* A plus that turns into a minus when the answer is open */
.faq-icon {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-inline-start: 16px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .12);
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 8px;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: var(--brand-text);
    transition: transform .25s ease;
}

.faq-icon::after {
    transform: rotate(90deg);
}

.faq-item[open] .faq-icon::after {
    transform: rotate(0);
}

.faq-answer {
    padding: 0 20px 20px;
}

@media (min-width: 768px) {
    .faq-answer {
        padding: 0 24px 24px;
    }
}

.faq-answer p {
    margin: 0;
    color: var(--dark);
    line-height: 1.65;
}

/* -----------------------------------------------------------------------------
   About: the person behind the studio
   -------------------------------------------------------------------------- */

/* A panel: the portrait with a name card over its bottom edge on the
   left, the copy on the right */
.about {
    display: block;
    padding: 24px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--light);
}

@media (min-width: 768px) {
    .about {
        display: flex;
        align-items: center;
        padding: 48px;
    }
}

/* Above the copy on phones, beside it from 768px */
.about-portrait {
    position: relative;
    flex: 0 0 240px;
    max-width: 280px;
    margin: 0 0 56px;
}

@media (min-width: 768px) {
    .about-portrait {
        max-width: none;
        margin: 0 0 24px;
        margin-inline-end: 40px;
    }
}

@media (min-width: 1024px) {
    .about-portrait {
        flex-basis: 320px;
        margin-inline-end: 56px;
    }
}

.about-photo {
    display: flex;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 32px 64px -32px rgba(var(--ink-rgb), .5);
}

.about-photo svg {
    width: 40px;
    height: 40px;
}

/* Name and role, overlapping the bottom of the portrait */
.about-badge {
    position: absolute;
    bottom: -24px;
    inset-inline-start: 16px;
    inset-inline-end: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 16px 32px -16px rgba(var(--ink-rgb), .3);
}

.about-badge strong {
    display: block;
    font-family: var(--headings-font);
    font-size: 1.05rem;
}

.about-badge span {
    color: var(--gray);
    font-size: .85rem;
}

.about-copy {
    flex: 1 1 0;
    min-width: 0;
}

.about-copy h2 {
    font-size: 1.9rem;
    line-height: 1.1;
    letter-spacing: -.025em;
}

@media (min-width: 1024px) {
    .about-copy h2 {
        font-size: 2.45rem;
    }
}

@media (min-width: 1280px) {
    .about-copy h2 {
        font-size: 2.6rem;
    }
}

.about-copy .lead {
    max-width: 640px;
}

/* Written with the element so it outranks ul.styled-list in style.css */
ul.about-facts {
    display: flex;
    flex-wrap: wrap;
    margin: 24px 0 36px;
}

.about-copy .button {
    padding: 14px 24px;
    font-size: 1rem;
}

.about-facts li {
    display: inline-flex;
    align-items: center;
    margin: 0 8px 8px 0;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--dark);
    font-size: .85rem;
    font-weight: 600;
}

.about-facts li::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: var(--accent);
}

/* -----------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */

.cta-band,
.cta-link {
    color: var(--on-ink);
}

.cta-band {
    position: relative;
    overflow: hidden;
    padding: 56px 20px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(rgba(var(--on-ink-rgb), .1) 1px, transparent 1.5px) 0 0 / 28px 28px,
        linear-gradient(135deg, var(--ink), var(--ink-deep));
    box-shadow: 0 48px 96px -48px rgba(var(--ink-rgb), .8);
}

@media (min-width: 768px) {
    .cta-band {
        padding: 96px 32px;
    }
}

.cta-band::before,
.cta-band::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
    animation: drift 16s ease-in-out infinite alternate;
}

.cta-band::before {
    top: -160px;
    inset-inline-start: -80px;
    width: 400px;
    height: 400px;
    background: rgba(var(--accent-rgb), .5);
}

.cta-band::after {
    bottom: -200px;
    inset-inline-end: -80px;
    width: 420px;
    height: 420px;
    background: rgba(var(--accent-rgb), .25);
    animation-delay: -8s;
}

.cta-band > * {
    position: relative;
    z-index: 1;
}

.cta-band h2 {
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -.03em;
}

@media (min-width: 768px) {
    .cta-band h2 {
        font-size: 2.35rem;
    }
}

@media (min-width: 1024px) {
    .cta-band h2 {
        font-size: 3rem;
    }
}

@media (min-width: 1280px) {
    .cta-band h2 {
        font-size: 3.25rem;
    }
}

.cta-band p {
    max-width: 600px;
    font-size: 1.15rem;
    opacity: .85;
}

.cta-band .form-actions {
    margin-top: 32px;
}

.cta-band .cta-contact {
    margin-top: 32px;
    font-size: .9rem;
    opacity: .7;
}

/* Footer: the copyright line under the tagline */
.footer .footer-copyright {
    margin-top: 4px;
    font-size: .8rem;
}

/* -----------------------------------------------------------------------------
   The modal and the form status line of ui.js, as in the app-boilerplate
   theme.css (same class names and markup), then the booking modal's own
   look
   -------------------------------------------------------------------------- */
/* The modal (ui.js): a native <dialog> over a dimmed page, centred, full
   width with a 16px gutter on phones and 480px wide at most. Plain by
   default, a surface like the menus' panels: it fades in as it opens (at
   once with reduced motion), the close button sits at the top end and the
   actions line up at the end. A project dresses it up through the modal
   tokens and its own .modal rules. */
.modal {
    width: calc(100% - 32px);
    max-width: var(--modal-width);
    margin: auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--modal-radius);
    background: var(--white);
    color: var(--black);
    box-shadow: var(--modal-shadow);
}

.modal[open] {
    animation: modal-fade .2s ease-out;
}

.modal::backdrop {
    /* Browsers from before 2024 hand ::backdrop no custom properties, so
       each value carries the default as its fallback */
    background: var(--modal-backdrop, rgba(0, 0, 0, .5));
    -webkit-backdrop-filter: blur(var(--modal-blur, 0px));
    backdrop-filter: blur(var(--modal-blur, 0px));
}

@keyframes modal-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-body {
    position: relative;
    padding: 24px 20px;
}

.modal-title {
    margin: 0 0 8px 0;
    padding-inline-end: 40px;
    font-size: 1.25rem;
}

/* The message of a confirm or alert box keeps its line breaks */
.modal-text {
    margin: 0 0 24px 0;
    color: var(--gray);
    white-space: pre-line;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(var(--black-rgb), .05);
    color: var(--black);
    font-size: 1.3rem;
    line-height: 1;
}

[dir="rtl"] .modal-close {
    right: auto;
    left: 16px;
}

.modal-close:not([disabled]):hover {
    background: rgba(var(--black-rgb), .1);
    background-image: none;
}

/* The cross sits on the button's own line height (style.css gives every
   span 1.5, which would push it off centre) */
.modal-close span {
    line-height: 1;
}

.modal .modal-actions {
    justify-content: flex-end;
    margin-top: 8px;
}

.modal .modal-actions > *:last-child {
    margin-inline-end: 0;
}

/* A status line under a form in a modal: muted, red for an error, gone
   while empty */
.modal-status {
    margin: 12px 0 0 0;
    color: var(--gray);
    font-size: .9rem;
}

.modal-status.is-error {
    color: var(--error-text);
}

.modal-status:empty {
    display: none;
}

/* A modal's done state: centred, under a round check */
.modal-success {
    text-align: center;
}

.modal-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(var(--green-rgb), .12);
    color: var(--green-strong);
    font-size: 1.75rem;
}

/* The done state's title is centred, so it keeps no room for the close
   button */
.modal-success .modal-title {
    padding-inline-end: 0;
}

@media (min-width: 768px) {
    .modal-body {
        padding: 32px;
    }
}

/* The status line of a form (setFormStatus()): right after its buttons,
   the error color for an error, the ink for success, gone while empty */
.form-status {
    margin: 12px 0 0 0;
    color: var(--gray);
    font-size: .95rem;
}

.form-status.is-error {
    color: var(--error-text);
}

.form-status.is-success {
    color: var(--black);
}

.form-status.is-info {
    color: var(--gray);
}

.form-status:empty {
    display: none;
}

/* The booking modal keeps the plain shared look; only its form fits the
   page: the labels and message box match the page's forms, and the done
   state's button sits centred under the message. */

.modal.booking-done .modal-actions {
    justify-content: center;
}

.modal.booking label {
    margin-bottom: 6px;
    font-size: .85rem;
    font-weight: 600;
}

.modal.booking textarea {
    min-height: 88px;
}

.modal.booking button[disabled] {
    opacity: .6;
}

/* -----------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-copy > *,
    .mockup-stage,
    .mockup-phone,
    .site-hero::before,
    .site-hero::after,
    .cta-band::before,
    .cta-band::after,
    #hero.site-hero .eyebrow::before,
    .modal[open] {
        animation: none;
    }

    .mockup {
        transform: none;
        transition: none;
    }

    .card-grid > .custom-column > .inner-column > .wrapper:hover,
    .button:not([disabled]):hover {
        transform: none;
    }
}

/* header.css */
/* =============================================================================
   header.css - the header shared by the home page and sites/
   =============================================================================
   Frosted bar, wordmark, section links, language and mode switches and
   the booking button, rendered by header.php. css.php and sites/css.php
   both serve it after style.css and theme.css.

   .studio-header pins the studio's own tokens and font, so the header
   looks the same on the home page and on a proposal page that repaints
   everything else in a client's colours and fonts. The .header rules
   without it are shared with the company proposals' header.
   ============================================================================= */

/* The studio's colours, written like the theme's tokens: the light values
   here, then three override blocks kept in sync (body.dark, the
   prefers-color-scheme query, body.light) */
.studio-header {
    --brand:         var(--black);
    --brand-rgb:     var(--black-rgb);
    --on-brand:      var(--white);
    --on-brand-rgb:  var(--white-rgb);
    --accent:        #4F46E5;
    --accent-rgb:    79, 70, 229;
    --ink:           #111114;
    --ink-rgb:       17, 17, 20;
    --headings-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --body-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-family: var(--body-font);
}

body.dark .studio-header {
    --ink:     #0B0B0E;
    --ink-rgb: 11, 11, 14;
}

@media (prefers-color-scheme: dark) {
    .studio-header {
        --ink:     #0B0B0E;
        --ink-rgb: 11, 11, 14;
    }
}

body.light .studio-header {
    --ink:     #111114;
    --ink-rgb: 17, 17, 20;
}

.header {
    background: rgba(var(--white-rgb), .82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: none;
    transition: box-shadow .3s ease;
}

.header.is-scrolled {
    box-shadow: 0 8px 32px -16px rgba(var(--ink-rgb), .25);
}

/* The row never wraps, and the brand column is itself a flex box so the
   brand sits on the row's centre line instead of on a text baseline. On
   phones the brand column takes whatever the buttons leave. */
.header .custom-container > .custom-row {
    flex-wrap: nowrap;
}

.header .custom-container > .custom-row > .custom-column:first-child {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    width: auto;
    min-width: 0;
}

@media (min-width: 768px) {
    .header .custom-container > .custom-row > .custom-column:first-child {
        flex: 0 1 auto;
    }
}

.site-brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
    transition: opacity .2s ease;
}

a.site-brand:hover {
    opacity: .75;
}

/* The header button carries a full and a short label; small phones show
   the short one so the row fits on one line */
.header .label-short {
    display: none;
}

.wordmark {
    display: inline-flex;
    align-items: center;
}

.wordmark-mark {
    position: relative;
    width: 24px;
    height: 24px;
    margin-inline-end: 8px;
    border-radius: 7px;
    background: var(--ink);
}

@media (min-width: 768px) {
    .wordmark-mark {
        width: 28px;
        height: 28px;
        margin-inline-end: 10px;
        border-radius: 8px;
    }
}

/* The dot, centred on the mark: (24px - 8px) / 2 from the top and the
   start on phones, (28px - 10px) / 2 from 768px */
.wordmark-mark::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

@media (min-width: 768px) {
    .wordmark-mark::after {
        top: 9px;
        left: 9px;
        width: 10px;
        height: 10px;
    }
}

/* Flex centres the name's line box, which sits the capitals 0.7px above
   the 28px mark from 768px; the name moves half a pixel down there as an
   optical correction (the smaller wordmark on phones is already level) */
.wordmark-name {
    position: relative;
    font-family: var(--headings-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

@media (min-width: 768px) {
    .wordmark-name {
        top: .5px;
        font-size: 1.15rem;
    }
}

/* The section links: gone on phones (style.css would fold them into a
   collapsible block), centred in the bar from 768px */
.header .custom-column.header-nav {
    display: none !important;
}

@media (min-width: 768px) {
    .header .custom-column.header-nav {
        display: block !important;
    }
}

.header .header-nav {
    flex: 1 1 auto;
    text-align: center;
}

.header .header-nav nav > ul {
    justify-content: center;
}

.header .header-nav li a {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--dark);
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}

.header .header-nav li a:hover {
    background: rgba(var(--black-rgb), .05);
    color: var(--black);
    text-decoration: none;
}

.header .header-nav li:not(:last-child) {
    margin-inline-end: 4px;
}

/* The switches and the button keep their one line on phones */
.header .header-cta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    margin-inline-start: 12px;
}

@media (min-width: 768px) {
    .header .header-cta {
        flex: 0 1 auto;
        margin-inline-start: 0;
    }
}

.header .header-cta .button {
    padding: 8px 12px;
    font-size: .75rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .header .header-cta .button {
        padding: 8px 16px;
        font-size: .85rem;
        white-space: normal;
    }
}

/* Language switch: a small pill with the other language's code */
.header .lang-switch {
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin-inline-end: 8px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(var(--black-rgb), .05);
    color: var(--black);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    transition: background-color .2s ease, border-color .2s ease;
}

@media (min-width: 768px) {
    .header .lang-switch {
        height: 40px;
        margin-inline-end: 12px;
        padding: 0 14px;
    }
}

.header .lang-switch:hover {
    background: rgba(var(--black-rgb), .1);
    border-color: rgba(var(--black-rgb), .3);
    text-decoration: none;
}

/* Light / dark switch: a round icon button showing the mode it leads to */
.header .mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-inline-end: 8px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(var(--black-rgb), .05);
    color: var(--black);
    transition: background-color .2s ease, border-color .2s ease;
}

@media (min-width: 768px) {
    .header .mode-toggle {
        width: 40px;
        height: 40px;
        margin-inline-end: 12px;
    }
}

.header .mode-toggle:not([disabled]):hover {
    background: rgba(var(--black-rgb), .1);
    background-image: none;
    border-color: rgba(var(--black-rgb), .3);
}

.mode-toggle svg {
    width: 18px;
    height: 18px;
}

body.light .mode-toggle .icon-sun,
body.dark .mode-toggle .icon-moon {
    display: none;
}

/* Small phones (under 480px): the short button label and smaller
   switches */
@media (max-width: 479px) {
    .header .label-full {
        display: none;
    }

    .header .label-short {
        display: inline;
    }

    .header .mode-toggle {
        width: 32px;
        height: 32px;
        margin-inline-end: 6px;
    }

    .header .mode-toggle svg {
        width: 16px;
        height: 16px;
    }

    .header .lang-switch {
        height: 32px;
        margin-inline-end: 6px;
        padding: 0 9px;
        font-size: .75rem;
    }

    .header .header-cta .button {
        padding: 8px 10px;
    }
}