/* ==========================================================================
   IDEALS, design system, iteration 0: the synthesis
   Near-white neutral base, ink foreground, one red accent, no warm washes,
   so the only colour on the page is the logo red and the photography.
   Arvo, the slab serif the logo wordmark is drawn in, carries the entire
   display voice, so headings and the mark are the same letterforms.
   Instrument Sans for prose, Space Mono for labels.
   Centred layout from 6; longevity metrics from 3; manifesto from 4;
   spec sheet from 5; desaturated full-bleed photography from 2, here of
   monuments that have outlived every civilisation that maintained them.

   Note: Arvo is considerably wider and heavier than a text serif, so the
   display steps below are smaller than they would be for a lighter face.
   They are sized by how the block reads, not by the numbers.
   ========================================================================== */

:root {
    --porcelain: #FAFBFC;
    --sand:      #EDF0F3;
    --card:      #FFFFFF;
    --ink:       #131619;
    --soft:      #5F666E;
    --accent:    #9C2A17;
    --line:      rgba(19, 22, 25, 0.12);

    --step-hero:      clamp(2.5rem, 7vw, 6.5rem);
    --step-h2:        clamp(1.9rem, 4.1vw, 3.6rem);
    --step-manifesto: clamp(1.45rem, 3.2vw, 2.9rem);
}

html { scroll-behavior: smooth; }

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

body {
    background-color: var(--porcelain);
    color: var(--ink);
    overflow-x: hidden;
}

section[id] { scroll-margin-top: 72px; }

::selection { background: var(--accent); color: #fff; }

/* --- Scroll progress hairline --------------------------------------------- */

.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 70;
    height: 2px;
    pointer-events: none;
}

.scroll-progress span {
    display: block;
    height: 100%;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
}

/* --- Accessibility ----------------------------------------------------------- */

.skip-link {
    position: fixed;
    top: -100%;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--porcelain);
    font-size: 0.8rem;
}

.skip-link:focus { top: 1rem; }

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

/* --- Typography ------------------------------------------------------------------
   Arvo carries the display voice, the same face as the logo wordmark.
   Sentence case, tight tracking, and a little more leading than a text serif
   needs, because the slab serifs collide when lines sit too close. */

.hero-title {
    font-family: 'Arvo', serif;
    font-size: var(--step-hero);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.display-2 {
    font-family: 'Arvo', serif;
    font-size: var(--step-h2);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -0.025em;
    max-width: 20ch;
}

.hero-title em,
.display-2 em,
.manifesto-statement em,
.closing-line em {
    font-style: italic;
    color: var(--accent);
    padding-right: 0.05em; /* keep italic overhang inside split-line masks */
}

.mono-label {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--soft);
}

.mono-label .idx {
    color: var(--accent);
    font-weight: 700;
}

.mono-label::after {
    content: '';
    width: 3rem;
    height: 1px;
    background: var(--line);
}

/* --- Blueprint grid ------------------------------------------------------------------
   A faint drawing grid behind everything, so the page reads as an engineering
   sheet rather than a brochure. Sits at z:-1, under every painted section. */

.grid-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right,  rgba(19, 22, 25, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(19, 22, 25, 0.035) 1px, transparent 1px);
    background-size: 88px 88px;
}

/* --- Monument plates (see partials/monument.php) --------------------------------------
   Photography treatment from iteration 2, tuned for a light page: fully
   desaturated so the page keeps one colour. Each plate is framed like a survey
   subject, instrument brackets at the corners, a monospace readout beneath. */

.img-treat {
    filter: grayscale(1) contrast(1.04) brightness(1.04);
    background: #EBEEF1;
}

.monument-frame {
    position: relative;
    overflow: hidden;
}

.monument-shot {
    display: block;
    width: 100%;
    object-fit: cover;
}

/* Full-bleed panorama, hero and closing. */
.monument--bleed .monument-shot { height: 38vh; }

@media (min-width: 768px) {
    .monument--bleed .monument-shot { height: 44vh; }
}

/* Inset plate inside a section's measure. */
.monument--strip .monument-frame {
    border: 1px solid var(--line);
    border-radius: 3px;
}

.monument--strip .monument-shot { aspect-ratio: 21 / 9; }

@media (max-width: 640px) {
    .monument--strip .monument-shot { aspect-ratio: 16 / 10; }
}

/* Instrument corner brackets. Two corners come from the frame, two from the
   brackets span, four L-shapes with no extra markup. */
.monument-frame::before,
.monument-frame::after,
.monument-brackets::before,
.monument-brackets::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 16px;
    height: 16px;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0.85);
    border-style: solid;
    border-width: 0;
}

.monument-frame::before { top: 10px;    left: 10px;  border-top-width: 1px; border-left-width: 1px; }
.monument-frame::after  { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }
.monument-brackets::before { top: 10px;    right: 10px; border-top-width: 1px; border-right-width: 1px; }
.monument-brackets::after  { bottom: 10px; left: 10px;  border-bottom-width: 1px; border-left-width: 1px; }

/* Monospace readout under the plate: STRUCTURE / BUILT / UPTIME / STATUS. */
.monument-data {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.25rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.monument--bleed .monument-data {
    margin-top: 0;
    padding: 0.85rem 1.25rem 0;
    border-top: 0;
    justify-content: center;
}

.monument-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.3rem 0;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

/* The readout wraps to two or three rows on narrow screens; tighten the
   column gap so it packs rather than straggling. */
@media (max-width: 640px) {
    .monument-data { gap: 0 1.15rem; }
    .monument-cell { letter-spacing: 0.1em; }
}

.monument-k { color: rgba(19, 22, 25, 0.4); }

.monument-v { color: var(--soft); }

/* Uptime is the argument, it reads as a live measurement, not a date. */
.monument-cell.is-key .monument-k { color: var(--accent); }

.monument-cell.is-key .monument-v {
    color: var(--ink);
    font-weight: 700;
}

/* --- Brand logo (partials/logo.php, from iteration 2) --------------------------------
   Red Fibonacci mark + IDEALS (Arvo). Square height = cap height; the word is
   pulled left so the mark's right edge bisects the "I". Sized in em. */

.ideals-logo {
    display: inline-block;
    line-height: 1;
    font-family: 'Arvo', serif;
    font-weight: 700;
    text-transform: uppercase;
    color: currentColor; /* the whole word follows the surrounding text colour */
    white-space: nowrap;
}

.ideals-logo__mark {
    display: inline-block;
    width: 0.745em;
    height: 0.745em;     /* = Arvo "I" cap height, matched to the letter exactly */
    vertical-align: baseline;
    background-image: linear-gradient(
        to right,
        var(--accent) 0 5.2%,        /* red 3  */
        transparent   5.2% 8.7%,
        var(--accent) 8.7% 17.3%,    /* red 5  */
        transparent   17.3% 20.8%,
        var(--accent) 20.8% 34.5%,   /* red 8  */
        transparent   34.5% 38%,
        var(--accent) 38% 60.4%,     /* red 13 */
        transparent   60.4% 63.9%,
        var(--accent) 63.9% 100%     /* red 21 */
    );
}

.ideals-logo__word {
    margin-left: -0.2em;
    letter-spacing: 0.05em;
}

/* --- Buttons -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.7rem;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border: 1px solid var(--ink);
    border-radius: 6px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-lg { padding: 1.05rem 2.2rem; }

.btn-solid { background: var(--ink); color: var(--porcelain); }

.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }

.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn::after {
    content: '\2192';
    font-family: 'Instrument Sans', sans-serif;
    transition: transform 0.25s ease;
}

.btn:hover::after { transform: translateX(4px); }

/* --- Navigation ------------------------------------------------------------------------ */

.site-nav { transition: background-color 0.3s ease, box-shadow 0.3s ease; }

.site-nav.is-scrolled {
    background: rgba(250, 247, 242, 0.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--line);
}

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

.nav-link,
.nav-cta,
.footer-link,
.contact-link { position: relative; }

.nav-link::after,
.nav-cta::after,
.footer-link::after,
.contact-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s ease;
}

.nav-link:hover::after,
.nav-cta:hover::after,
.footer-link:hover::after,
.contact-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 4px;
}

.menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.3s ease;
}

.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--porcelain);
}

.mobile-link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    font-family: 'Arvo', serif;
}

/* --- Metrics, the longevity index (from iteration 3) --------------------------------------- */

.metric-card {
    position: relative;
    padding: 2rem 1.75rem 1.75rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
}

/* Corner ticks, the cards read as instrument panels. */
.metric-card::before,
.metric-card::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(19, 22, 25, 0.28);
}

.metric-card::before { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.metric-card::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

/* Monospace, because these are measurements rather than display type. */
.metric-value {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.metric-value .suffix { color: var(--accent); }

.metric-unit {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
}

/* --- Philosophy (centred, from iteration 6) ---------------------------------------------------- */

.pull-quote-center {
    font-family: 'Arvo', serif;
    font-style: italic;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: var(--accent);
}

/* --- Manifesto, compact tile grid ------------------------------------------------------------------
   Only the six declarations appear here. The reasoning behind each one lives on
   manifesto.php, reached by the button under the grid. The tiles are separated
   by the container's own background showing through a 1px gap, so the rules
   between them are always exactly one hairline. */

.manifesto-tile {
    display: grid;
    align-content: center;
    gap: 0.7rem;
    padding: 2rem 1.75rem;
    min-height: 150px;
    background: var(--card);
    transition: background-color 0.3s ease;
}

.manifesto-tile:hover { background: var(--sand); }

.manifesto-num {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
}

.manifesto-statement {
    font-family: 'Arvo', serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .manifesto-statement { font-size: 1.3rem; }
}

/* --- Services, card grid --------------------------------------------------------------------------- */

.service-card {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    padding: 2rem 1.75rem 2.25rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 23, 28, 0.32);
}

.service-num {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
}

.service-name {
    font-family: 'Arvo', serif;
    font-size: 1.15rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .service-name { font-size: 1.3rem; }
}

/* --- Process, timeline with scroll fill (from iteration 3) -------------------------------------------- */

.timeline { position: relative; }

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 1px;
    background: var(--line);
}

.timeline-fill {
    position: absolute;
    top: 0;
    left: 5px;
    width: 1px;
    height: 100%;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top center;
}

.timeline-step {
    position: relative;
    padding: 0 0 2.75rem 2.5rem;
}

.timeline-step:last-child { padding-bottom: 0; }

.timeline-step::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--ink);
    background: var(--porcelain);
}

.timeline-step:hover::before { background: var(--accent); border-color: var(--accent); }

/* --- Horizons, arched cards (from iteration 6) -------------------------------------------------------------- */

.horizon-card {
    position: relative;
    padding: 2.5rem 2rem 2.25rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 150px 150px 20px 20px; /* the arch */
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.horizon-card:hover { transform: translateY(-6px); border-color: rgba(20, 23, 28, 0.3); }

/* Flat rings rather than the warm discs this started as, no gradients on the page. */
.horizon-card .sun {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
}

.horizon-card:nth-child(2) .sun { border-color: rgba(20, 23, 28, 0.35); }
.horizon-card:nth-child(3) .sun { border-color: var(--accent); background: var(--accent); }

.horizon-year {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
}

/* --- Work, browser frames on light (from iterations 2 and 4) -------------------------------------------------- */

.product-frame {
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--card);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 23, 28, 0.04);
}

.product-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--line);
    background: var(--sand);
}

.product-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }

.product-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(20, 23, 28, 0.18);
}

.product-url {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--soft);
}

.product-shot-wrap { aspect-ratio: 16 / 10; overflow: hidden; }

.product-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-frame:hover .product-shot { transform: scale(1.03); }

/* --- Spec sheet (from iteration 5) --------------------------------------------------------------------------------- */

.spec-row {
    display: grid;
    gap: 0.6rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
    .spec-row { grid-template-columns: 170px 280px 1fr; gap: 2.5rem; }
}

.spec-row:last-child { border-bottom: 1px solid var(--line); }

.spec-param {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--soft);
    padding-top: 0.3rem;
}

.spec-value {
    font-family: 'Arvo', serif;
    font-size: 1.05rem;
    line-height: 1.5;
    letter-spacing: -0.015em;
}

/* --- Closing, statement at dusk --------------------------------------------------------------------------------------- */

.closing-line {
    font-family: 'Arvo', serif;
    font-size: clamp(2.1rem, 5.8vw, 5.25rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

/* --- Legal pages (privacy.php, terms.php) -----------------------------------------------------------------------------------
   A single measured column. Long-form reading, so the type is larger and the
   leading looser than anywhere else on the site. */

.legal-section {
    margin-top: 3.25rem;
}

.legal-heading {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-family: 'Arvo', serif;
    font-size: 1.15rem;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .legal-heading { font-size: 1.35rem; }
}

.legal-num {
    flex-shrink: 0;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--accent);
}

.legal-body {
    margin-top: 1.1rem;
    line-height: 1.75;
    color: var(--soft);
}

/* Align the prose with the heading text rather than its number. */
@media (min-width: 768px) {
    .legal-body,
    .legal-list { margin-left: calc(11px * 2 + 1rem); }
}

.legal-list {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.75rem;
}

.legal-list li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    line-height: 1.7;
    color: var(--soft);
}

/* --- Contact form ---------------------------------------------------------------------------------------------------------- */

.direct-line input[name="contact"] {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(20, 23, 28, 0.3);
    padding: 0.7rem 0;
    font-size: 1.2rem;
    color: var(--ink);
    border-radius: 0;
    transition: border-color 0.25s ease;
}

.direct-line input[name="contact"]::placeholder { color: rgba(20, 23, 28, 0.35); }

.direct-line input[name="contact"]:focus {
    outline: none;
    border-bottom-color: var(--accent);
}

.point-block {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    background: var(--accent);
    transform: translateY(-1px);
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

.form-status.is-ok    { color: var(--ink); }
.form-status.is-error { color: var(--accent); }

/* --- Animation setup --------------------------------------------------------------------------------------------------------
   Elements are hidden only when JS is running (html.js). If GSAP fails to
   load, main.js restores visibility; with JS disabled nothing hides at all. */

.js.gsap-ready [data-reveal],
.js.gsap-ready [data-clip] {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .js.gsap-ready [data-reveal],
    .js.gsap-ready [data-clip] {
        visibility: visible;
    }
}