/* Service and location pages (pt/, es/, en/). Generated HTML, hand-written CSS.
   Base, paper texture, header and language menu are copied from index.html so
   both read as one site; keep them in step when the homepage changes. */

@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

:root {
    --bg: #FAF9F6;
    --surface: rgba(255, 255, 255, 0.55);
    --text: #1a1a1a;
    --text-muted: #666666;
    --line: rgba(0, 0, 0, 0.08);
    --parchment-edge: 184, 139, 47;
    --gold: rgb(184, 139, 47);
    --gold-soft: rgba(184, 139, 47, 0.12);
    /* --gold is ~2.9:1 on --bg: decoration only. Text in gold uses --gold-ink (~5:1). */
    --gold-ink: #85601c;
    --font-display: 'Syne', sans-serif;
    --font-body: 'Inter', Georgia, serif;
    --measure: 46rem;
}

/* Japanese pages: Noto Sans JP covers the glyphs Syne and Inter lack */
html[lang="ja"] {
    --font-display: 'Syne', 'Noto Sans JP', sans-serif;
    --font-body: 'Inter', 'Noto Sans JP', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Scrollbar hidden, scrolling itself untouched */
html {
    scroll-behavior: smooth;
    scrollbar-width: none;
}

html::-webkit-scrollbar { display: none; }

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    animation: page-fade-in 0.35s ease both;
}

/* Paper grain */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* Soft, uneven age at the paper edges; the warm tone dissolves into --bg. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 38% 30% at 0% 0%, rgba(var(--parchment-edge), 0.25), transparent 72%),
        radial-gradient(ellipse 34% 38% at 100% 0%, rgba(var(--parchment-edge), 0.18), transparent 74%),
        radial-gradient(ellipse 42% 32% at 0% 100%, rgba(var(--parchment-edge), 0.2), transparent 74%),
        radial-gradient(ellipse 36% 36% at 100% 100%, rgba(var(--parchment-edge), 0.24), transparent 72%),
        linear-gradient(90deg, rgba(var(--parchment-edge), 0.13), transparent 9%, transparent 91%, rgba(var(--parchment-edge), 0.12)),
        linear-gradient(180deg, rgba(var(--parchment-edge), 0.11), transparent 8%, transparent 92%, rgba(var(--parchment-edge), 0.14));
    box-shadow: inset 0 0 4.5rem rgba(var(--parchment-edge), 0.08);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 2;
}

::selection { background: rgba(184, 139, 47, 0.22); color: var(--text); }
html { accent-color: var(--gold-ink); caret-color: var(--gold-ink); }

a { color: inherit; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
a:hover { color: var(--gold-ink); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Header: same as the homepage. Fixed, transparent, top-left. */
header {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    padding: 1.25rem 4rem;
}

.logo a { display: inline-block; }

.logo img {
    height: 56px;
    width: auto;
    opacity: 0.9;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.lang-switch {
    position: relative;
    width: max-content;
    margin-top: 0.45rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.logo,
.lang-switch {
    pointer-events: auto;
}

.lang-current,
.lang-list a {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.lang-current:hover,
.lang-list a:hover,
.lang-list a[aria-current] {
    opacity: 0.55;
    color: var(--text);
}

.lang-list {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.lang-switch.open .lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Slide the header away once the reader scrolls, as the homepage does on
   narrower screens: here the text column runs underneath it. */
header.scrolled .logo img,
header.scrolled .lang-switch {
    transform: translateX(calc(-100% - 4rem));
    opacity: 0;
}

/* Main wrap: same outer padding as the homepage's .fibonacci-container,
   with the text held to a readable measure. */
.wrap {
    position: relative;
    z-index: 3;
    max-width: 1400px;
    margin: 0 auto;
    /* Wide enough on the left that the fixed logo column never sits over the text */
    padding: 0 clamp(4rem, 9vw, 10rem);
}

main.wrap {
    padding-top: calc(40px + 6rem);
    padding-bottom: 4rem;
    min-height: 100vh;
}

/* Everything starts on the logo's left edge, like the homepage grid */
main.wrap > * { max-width: var(--measure); }
main.wrap > section:has(.cards) { max-width: 64rem; }

/* "How I work" and "Who does the work" side by side */
main.wrap > .duo {
    max-width: 64rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 4rem;
    border-top: 1px solid var(--line);
}
.duo > section { border-top: 0; }
.duo .proof { grid-template-columns: repeat(2, 1fr); }
/* FAQ on the left, the contact form on the right */
.duo-contact { align-items: start; }
.duo-contact > .contact { max-width: none; margin: 0; }
.duo-contact .contact-head { text-align: left; }
.duo-contact .contact-head h2 { font-size: clamp(1.35rem, 3.5vw, 1.75rem); }

/* Breadcrumbs */
.crumbs { font-size: .85rem; color: var(--text-muted); margin-top: 0; margin-bottom: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li + li::before { content: '/'; margin-right: .4rem; opacity: .5; }
.crumbs a { text-decoration: none; }

/* Hero */
.hero { padding: 2.5rem 0 3rem; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 1.25rem; text-wrap: balance; }
h2, h3 { text-wrap: balance; }
.lead { font-size: 1.15rem; color: var(--text-muted); margin: 0 0 2rem; max-width: 38rem; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
    display: inline-block;
    padding: .8rem 1.3rem;
    border-radius: 999px;
    border: 1px solid var(--text);
    background: var(--text);
    color: var(--bg);
    font: 600 .9rem var(--font-display);
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: #fff; }
.btn.ghost { background: transparent; color: var(--text); }
/* Ghost keeps its text the colour of its border, at rest and on hover */
.btn.ghost:hover { background: transparent; color: var(--gold-ink); border-color: var(--gold-ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: wait; transform: none; }

/* Sections */
section { padding: 3rem 0; border-top: 1px solid var(--line); }
h2 { font-size: clamp(1.35rem, 3.5vw, 1.75rem); margin: 0 0 1.5rem; }
h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
p { margin: 0 0 1rem; }

ul.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; }
ul.ticks li::before { content: ''; position: absolute; left: 0; top: .8em; width: .7rem; height: 1px; background: var(--gold); }

/* Ruled grid rather than boxed cards: hairline on top, text on the paper */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem 2.5rem; }
.card { border-top: 1px solid rgba(0, 0, 0, 0.14); padding: 1.1rem 0 0; }
.card p { margin: 0; color: var(--text-muted); font-size: .95rem; text-wrap: pretty; }
a.card { text-decoration: none; display: block; transition: border-color .25s; }
a.card h3 { transition: color .2s; }
a.card:hover { border-top-color: var(--gold); color: inherit; }
a.card:hover h3 { color: var(--gold-ink); }

ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
ol.steps li { counter-increment: s; position: relative; padding: 0 0 1.5rem 3.6rem; }
ol.steps li::before {
    content: counter(s);
    position: absolute; left: 0; top: -.1rem;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--gold-soft); color: var(--gold-ink);
    font: 700 1.25rem/1 var(--font-display);
}

.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.proof div { border-top: 1px solid rgba(0, 0, 0, 0.14); padding: .8rem 0 0; }
.proof strong { display: block; font: 700 1.3rem/1.2 var(--font-display); text-wrap: balance; }
.proof span { display: block; margin-top: .2rem; font-size: 1.02rem; color: var(--text-muted); }

/* FAQ */
details { border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: color .2s; }
summary:hover { color: var(--gold-ink); }
summary::-webkit-details-marker { display: none; }
/* Plus drawn in CSS: one bar, the second bar is a shadow-free gradient that
   collapses when open */
summary::after {
    content: ''; flex: none; width: 12px; height: 12px;
    background: linear-gradient(var(--gold-ink), var(--gold-ink)) center / 12px 1.5px no-repeat,
                linear-gradient(var(--gold-ink), var(--gold-ink)) center / 1.5px 12px no-repeat;
    transition: background-size .25s ease;
}
details[open] summary::after { background-size: 12px 1.5px, 1.5px 0; }
details p { margin: .6rem 0 0; color: var(--text-muted); }

/* Contact form: modeled on the Lynxia landing's proposal form (slate
   inputs, inline errors, slide-to-send). Values follow its Tailwind classes. */
main.wrap > .contact { max-width: 40rem; margin-top: 1rem; margin-bottom: 3rem; }
.contact-head { text-align: center; margin-bottom: 2rem; }
.contact-head h2 { font-size: clamp(1.25rem, 3.4vw, 1.875rem); font-weight: 700; color: #0f172a; margin: 0; }
.contact-head p { margin: .75rem 0 0; color: #475569; }
.contact form { display: block; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.field { position: relative; }
.contact input, .contact textarea {
    display: block;
    width: 100%;
    font: inherit;
    font-size: .875rem;
    line-height: 1.5;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    padding: .625rem 1rem;
    transition: border-color .2s, box-shadow .2s, opacity .5s;
}
.contact textarea { border-radius: 1rem; padding: .75rem 1rem; resize: vertical; min-height: 9rem; }
.contact input::placeholder, .contact textarea::placeholder { color: #94a3b8; }
.contact input:focus, .contact textarea:focus { outline: none; border-color: #64748b; }
.contact .is-invalid { border-color: #ef4444; box-shadow: 0 0 0 1px rgba(239, 68, 68, .3); }
.contact .is-valid { border-color: #34d399; box-shadow: 0 0 0 1px rgba(52, 211, 153, .3); }
.contact .is-fading { opacity: 0; }
.field-msg { margin: .25rem 0 0; font-size: .75rem; }
.field-msg.is-error { color: #ef4444; }
.contact textarea + .field-msg { margin-top: .5rem; }
.contact .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.contact .is-shaking { animation: shake .5s ease; }

/* Slide to send */
.slide-wrap { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 1rem; }
.slide {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 12rem; height: 1.75rem;
    border-radius: 999px;
    background: #f1f5f9;
    transition: width .3s ease;
    touch-action: none;
}
.slide:not([data-state="idle"]) { width: 8rem; }
.slide-fill { position: absolute; inset: 0 auto 0 0; width: 10px; border-radius: 999px; background: #e2e8f0; transition: width .3s; }
.slide-knob {
    position: absolute; left: -.25rem; z-index: 1;
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem;
    border: 0; border-radius: 50%;
    background: #0f172a; color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    cursor: grab; user-select: none; touch-action: none;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), scale .15s;
}
.slide.is-dragging .slide-knob { cursor: grabbing; scale: 1.05; transition: scale .15s; }
.slide.is-dragging .slide-fill { transition: none; }
.slide-knob:focus-visible { outline: 2px solid #64748b; outline-offset: 3px; }
.slide svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slide-done {
    position: absolute; inset: 0;
    display: none; place-items: center;
    border-radius: 999px; background: #0f172a; color: #fff;
}
.slide-done svg { width: 1.25rem; height: 1.25rem; display: none; }
.slide:not([data-state="idle"]) .slide-done { display: grid; }
.slide:not([data-state="idle"]) .slide-knob, .slide:not([data-state="idle"]) .slide-fill { display: none; }
.slide[data-state="loading"] .i-loading,
.slide[data-state="success"] .i-success,
.slide[data-state="error"] .i-error { display: block; }
.i-loading { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.slide-hint { font-size: .75rem; color: #64748b; }

.form-status { min-height: 1.2em; margin: .75rem 0 0; text-align: center; font-size: .8rem; font-weight: 500; color: #059669; }
.form-status.error { color: #ef4444; }
.contact .alt { text-align: center; font-size: .85rem; color: var(--text-muted); margin: .75rem 0 0; }

@media (max-width: 640px) {
    .contact-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .contact .is-shaking, .i-loading { animation: none; }
}

/* Footer */
.site-footer { position: relative; z-index: 3; border-top: 1px solid var(--line); padding: 3rem 0 4rem; font-size: .9rem; color: var(--text-muted); }
.site-footer .wrap { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.site-footer h3 { font-size: .9rem; color: var(--text); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .35rem; }
.site-footer a { text-decoration: none; }

@media (max-width: 1200px) {
    .wrap { padding-left: 8rem; padding-right: 3rem; }
    header { padding: 1.25rem 2rem; }
}

@media (max-width: 768px) {
    /* Header drops to the bottom-left, as on the homepage: on a phone the
       thumb lives there, and the top belongs to the content */
    header {
        top: auto;
        bottom: 0;
        padding: 0.75rem 1rem 1rem;
        display: flex;
        align-items: flex-end;
        gap: 0.75rem;
        background: linear-gradient(to top, var(--bg) 55%, transparent);
    }

    .logo img { height: 42px; }

    .lang-switch {
        margin-top: 0;
        margin-bottom: 0.15rem;
    }

    /* The list opens upwards, or it would fall off the screen */
    .lang-list {
        top: auto;
        bottom: 100%;
        margin: 0 0 0.35rem;
        transform: translateY(4px);
    }

    .lang-switch.open .lang-list { transform: translateY(0); }

    /* Never slide the logo away now that it anchors the bottom bar */
    header.scrolled .logo img,
    header.scrolled .lang-switch {
        transform: none;
        opacity: 1;
    }

    .wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
    main.wrap > .duo { grid-template-columns: 1fr; }
    .duo > section + section { border-top: 1px solid var(--line); }
    main.wrap { padding-top: 2rem; }
    section { padding: 2.25rem 0; }

    /* Hero centred on phones */
    .hero { text-align: center; }
    .hero-cta { justify-content: center; }
    .crumbs { justify-content: center; }

    /* Room so the bar never covers the footer's last line */
    .site-footer { padding-bottom: 6rem; }

    body::after {
        background:
            radial-gradient(ellipse 52% 22% at 0% 0%, rgba(var(--parchment-edge), 0.22), transparent 72%),
            radial-gradient(ellipse 48% 24% at 100% 0%, rgba(var(--parchment-edge), 0.16), transparent 74%),
            radial-gradient(ellipse 52% 22% at 0% 100%, rgba(var(--parchment-edge), 0.18), transparent 74%),
            radial-gradient(ellipse 48% 24% at 100% 100%, rgba(var(--parchment-edge), 0.21), transparent 72%),
            linear-gradient(90deg, rgba(var(--parchment-edge), 0.1), transparent 7%, transparent 93%, rgba(var(--parchment-edge), 0.1));
        box-shadow: inset 0 0 3rem rgba(var(--parchment-edge), 0.07);
    }
}

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