/* ==========================================================================
   TMY — base: tokens, reset, typography, header, menu, footer, utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

/*
 * Values come from the Claude Design export. Breakpoints cannot be custom
 * properties, so they are listed here and used as literals:
 *
 *   860px  layout switch: stacked sections, full-screen menu
 *   700px  mobile type sizes
 *   560px  small phones
 */

:root {
  /* Base colours */
  --ink: #0b0b0c;          /* near-black text and dark sections */
  --paper: #f7f7f5;        /* page background */
  --paper-2: #f1f1ee;      /* alternating section background */
  --line: #e7e7e3;         /* rules and borders on paper */
  --night: #141416;        /* raised surface on dark sections */
  --white: #fff;
  --danger: #b3261e;       /* form errors */

  /* Logo colours. --acc is the working accent: links, active states, buttons. */
  --acc: #0fa3e2;          /* blue */
  --magenta: #ec008c;
  --amber: #f0a500;
  --green: #00b85c;
  --purple: #7b2ff2;

  /* The same colours dark enough for text on paper (WCAG AA). */
  --acct: #076a94;         /* blue */
  --magenta-t: #a8005f;
  --amber-t: #8a5b00;
  --green-t: #006b3c;
  --purple-t: #6425c7;

  /* Ink and paper at the opacities the design uses. Text on paper needs
     --ink-62 or darker to pass WCAG AA (4.5:1); the lighter steps are for
     rules, fills and decoration. On ink, --paper-55 is the lightest for text. */
  --ink-90: rgba(11, 11, 12, .9);
  --ink-86: rgba(11, 11, 12, .86);
  --ink-80: rgba(11, 11, 12, .8);
  --ink-75: rgba(11, 11, 12, .75);
  --ink-72: rgba(11, 11, 12, .72);
  --ink-68: rgba(11, 11, 12, .68);
  --ink-65: rgba(11, 11, 12, .65);
  --ink-62: rgba(11, 11, 12, .62);
  --ink-55: rgba(11, 11, 12, .55);
  --ink-50: rgba(11, 11, 12, .5);
  --ink-42: rgba(11, 11, 12, .42);
  --ink-40: rgba(11, 11, 12, .4);
  --ink-30: rgba(11, 11, 12, .3);
  --ink-25: rgba(11, 11, 12, .25);
  --ink-20: rgba(11, 11, 12, .2);
  --ink-18: rgba(11, 11, 12, .18);
  --ink-14: rgba(11, 11, 12, .14);
  --ink-13: rgba(11, 11, 12, .13);
  --ink-12: rgba(11, 11, 12, .12);
  --ink-10: rgba(11, 11, 12, .1);

  --paper-75: rgba(247, 247, 245, .75);
  --paper-72: rgba(247, 247, 245, .72);
  --paper-70: rgba(247, 247, 245, .7);
  --paper-65: rgba(247, 247, 245, .65);
  --paper-60: rgba(247, 247, 245, .6);
  --paper-55: rgba(247, 247, 245, .55);
  --paper-50: rgba(247, 247, 245, .5);
  --paper-45: rgba(247, 247, 245, .45);
  --paper-42: rgba(247, 247, 245, .42);
  --paper-40: rgba(247, 247, 245, .4);
  --paper-30: rgba(247, 247, 245, .3);
  --paper-28: rgba(247, 247, 245, .28);
  --paper-25: rgba(247, 247, 245, .25);
  --paper-18: rgba(247, 247, 245, .18);
  --paper-15: rgba(247, 247, 245, .15);
  --paper-14: rgba(247, 247, 245, .14);
  --paper-12: rgba(247, 247, 245, .12);

  /* Type. One family throughout; labels are the same face, uppercase and tracked. */
  --font: 'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fw-thin: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  --fs-display: clamp(56px, 13.5vw, 240px);  /* hero wordmarks */
  --fs-h1: clamp(32px, 6vw, 96px);           /* closing statements */
  --fs-menu: clamp(26px, 8vw, 38px);         /* full-screen menu links */
  --fs-h2: clamp(28px, 3.8vw, 56px);         /* section titles */
  --fs-h3: clamp(22px, 2.4vw, 36px);         /* large card titles */
  --fs-h4: clamp(19px, 1.9vw, 28px);         /* card and list titles */
  --fs-lead: clamp(17px, 1.5vw, 22px);
  --fs-body-lg: clamp(16px, 1.35vw, 19px);
  --fs-body: clamp(15px, 1.25vw, 18px);
  --fs-small: 14px;
  --fs-label-lg: 12px;
  --fs-label: 11px;
  --fs-label-sm: 10px;

  --lh-display: .9;
  --lh-heading: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --lh-loose: 1.7;

  --ls-display: -.02em;
  --ls-heading: -.02em;
  --ls-tight: -.015em;
  --ls-nav: .02em;
  --ls-label: .18em;
  --ls-label-wide: .22em;

  /* Layout */
  --gutter: clamp(16px, 4vw, 56px);
  --container: 1280px;
  --measure: 56ch;
  --measure-narrow: 42ch;
  --header-h: 128px;       /* at the top of the page; it compacts on scroll */

  --section-y-sm: clamp(56px, 9vh, 110px);
  --section-y: clamp(70px, 11vh, 140px);
  --section-y-lg: clamp(80px, 12vh, 160px);

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap: 16px;
  --gap-md: 24px;
  --gap-lg: clamp(24px, 4vw, 56px);
  --gap-xl: clamp(32px, 5vw, 80px);

  --radius-sm: 2px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --dur-fast: .3s;
  --dur: .45s;
  --dur-slow: .7s;

  /* How much of 100vh the browser's own bars cover. Phones size 100vh as if
     the address and tool bars were hidden, so anything set at the foot of a
     full-screen block starts under them; 100svh is the height with the bars
     showing. Zero on desktop, and on browsers that lack svh (see below). */
  --vh-gap: 0px;
}

@supports (height: 100svh) {
  :root {
    --vh-gap: calc(100vh - 100svh);
  }
}

@media (max-width: 860px) {
  :root {
    --header-h: 94px;
  }
}

@media (max-width: 700px) {
  :root {
    /* The design sets running text to 17px on phones. */
    --fs-body: 17px;
    --fs-body-lg: 17px;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.tmy-no-scroll {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .3s;
}

a:hover {
  color: var(--acc);
}

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

img {
  height: auto;
}

button {
  font-family: inherit;
}

/* Any display rule must lose to the hidden attribute. */
[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

::selection {
  background: var(--magenta);
  color: var(--white);
}

/* Accessible skip link and screen-reader text. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A unit inside a line set in capitals: «m²», not «M²» (tmy_esc_caps()). */
.tmy-nocase {
  text-transform: none;
}

.tmy-skip {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 6px 6px;
  font-size: 14px;
  font-weight: 600;
  transition: top .25s;
}

.tmy-skip:focus {
  top: 0;
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   Design primitives — shared by the redesigned templates

   Dark sections set --label-color, --line-color and --link-hover so the same
   label and link read on either background.
   -------------------------------------------------------------------------- */

/* Photos are black and white, as in the design. Set to none to show colour. */
:root {
  --photo-filter: grayscale(1);
}

/* Υπηρεσίες, Blog, Επικοινωνία, the project and property archives and the
   «Έργα σε εξέλιξη» page show their photographs in colour. The token is
   redefined on the body, so every .tmy-photo inside inherits it — heroes,
   cards and service rows alike. */
.page-template-services,
.page-template-contact,
.page-template-projects-progress,
.blog,
.single-post,
.category,
.post-type-archive-project,
.tax-project_category,
.post-type-archive-sale,
.tax-sale_category {
  --photo-filter: none;
}

/* Η Εταιρεία and the single project and property pages keep their inside
   photographs black and white, but open in colour: the token is redefined on
   the hero alone. */
.page-template-about .tmy-hero,
.single-project .tmy-hero,
.single-sale .tmy-hero {
  --photo-filter: none;
}

/* Η αρχική is the other way round: the hero sets the black and white
   opening and everything below it — έργα, υπηρεσίες, ακίνητα — is in
   colour. */
.home {
  --photo-filter: none;
}

.home .tmy-hero {
  --photo-filter: grayscale(1);
}

.tmy-photo {
  filter: var(--photo-filter);
}

.tmy-wrap {
  max-width: var(--container);
  margin: 0 auto;
}

/* Small uppercase label above a section title. */
.tmy-label {
  margin-bottom: 22px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--label-color, var(--ink-62));
}

.tmy-title {
  max-width: 22ch;
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: pretty;
}

/* Section head: title block on one side, a note or link on the other. */
.tmy-head2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-bottom: clamp(32px, 6vh, 64px);
}

/* "Όλα τα έργα →" — an underlined link with an arrow. */
.tmy-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-color, var(--ink-25));
  font-size: 15px;
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.tmy-arrow-link:hover {
  border-bottom-color: var(--acc);
  color: var(--link-hover, var(--acct));
}

.tmy-arrow-link span {
  transition: transform var(--dur) var(--ease);
}

.tmy-arrow-link:hover span {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.tmy-section {
  padding: 130px var(--gutter);
}

/* Section eyebrow: "01 — Σχετικά με εμάς" */
.tmy-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acct);
  margin-bottom: 22px;
}

.tmy-section--dark .tmy-eyebrow {
  color: var(--acct);
}

.tmy-h2 {
  font-size: clamp(34px, 3.3vw, 56px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 300;
}

.tmy-h2 strong,
.tmy-accent {
  color: var(--acc);
  font-weight: 600;
}

/* Section head: title block left, link or lead paragraph right. */
/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.tmy-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

/* Primary: the text-safe blue. White on the logo blue is too faint to read. */
.tmy-btn--accent {
  background: var(--acct);
  color: var(--white);
}

.tmy-btn--accent:hover,
.tmy-btn--accent:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.tmy-btn--ink {
  background: var(--ink);
  color: var(--paper);
}

.tmy-btn--ink:hover,
.tmy-btn--ink:focus-visible {
  background: var(--acct);
  color: var(--white);
}

.tmy-btn--outline {
  border-color: var(--ink-30);
  color: var(--ink);
}

.tmy-btn--outline:hover,
.tmy-btn--outline:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

/* Outline on dark sections. */
.tmy-btn--outline-light {
  border-color: var(--paper-30);
  color: var(--paper);
}

.tmy-btn--outline-light:hover,
.tmy-btn--outline-light:focus-visible {
  border-color: var(--paper);
  background: rgba(247, 247, 245, .08);
  color: var(--paper);
}

.tmy-btn--white {
  background: var(--paper);
  color: var(--ink);
}

.tmy-btn--white:hover,
.tmy-btn--white:focus-visible {
  background: var(--acct);
  color: var(--white);
}

/* The design's form and closing call-to-action buttons are square. */
.tmy-btn--square {
  border-radius: 0;
}

/* Underlined "Όλα τα έργα →" style link. */
.tmy-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--ink-25);
  padding-bottom: 6px;
  white-space: nowrap;
}

.tmy-link--caps {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: 5px;
}

.tmy-section--dark .tmy-link,
.tmy-section--dark .tmy-link--caps {
  border-color: var(--paper-45);
}

/* --------------------------------------------------------------------------
   Header

   Solid by default. --hp runs from 0 at the top of the page to 1 once it has
   scrolled (app.js) and compacts the header. Over a full-screen hero
   (.tmy-header--overlay) it also drives the background, from transparent to
   solid, and the artwork turns from white to ink halfway (.is-ink). Without
   JavaScript the overlay styles never apply, so the header stays solid.
   -------------------------------------------------------------------------- */

.tmy-header {
  --hp: 0;
  --hbg: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: calc(16px - var(--hp) * 8px) var(--gutter);
  color: var(--ink);
  background: rgba(247, 247, 245, calc(var(--hbg) * .94));
  border-bottom: 1px solid rgba(11, 11, 12, calc(var(--hbg) * .1));
  box-shadow: 0 12px 40px -24px rgba(11, 11, 12, calc(var(--hbg) * var(--hp) * .35));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: color var(--dur-fast) ease;
}

.tmy-js .tmy-header--overlay {
  --hbg: min(1, calc(var(--hp) * 1.75));
  color: var(--paper);
  -webkit-backdrop-filter: blur(calc(var(--hbg) * 16px));
  backdrop-filter: blur(calc(var(--hbg) * 16px));
}

.tmy-js .tmy-header--overlay.is-ink {
  color: var(--ink);
}

.tmy-header__brand {
  display: flex;
  align-items: center;
  flex: none;
}

.tmy-header__logo {
  display: block;
  width: auto;
  height: calc(96px - var(--hp) * 40px);
  transition: filter .5s ease;
}

/* White artwork over the hero. */
.tmy-js .tmy-header--overlay:not(.is-ink) .tmy-header__logo {
  filter: brightness(0) invert(1);
}

.tmy-header__end {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
}

.tmy-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  white-space: nowrap;
}

.tmy-nav a {
  display: inline-block;
  padding: 6px 0;
  color: inherit;
  transition: color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.tmy-nav a:hover {
  color: var(--acc);
}

.tmy-nav .current-menu-item > a,
.tmy-nav .current_page_item > a,
.tmy-nav .current-menu-ancestor > a,
.tmy-nav .current-menu-parent > a {
  box-shadow: inset 0 -1px 0 currentColor;
}

/* Language switcher — static until WPML lands. */
.tmy-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--ink-18);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  line-height: 1;
  transition: border-color var(--dur) ease;
}

/* At least 24px tall, so each language is easy to tap (WCAG 2.5.8). */
.tmy-lang__item {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}

a.tmy-lang__item {
  color: inherit;
  transition: color var(--dur-fast) ease;
}

a.tmy-lang__item:hover {
  color: var(--acc);
}

.tmy-lang__item.is-active {
  background: var(--acct);
  color: var(--white);
}

.tmy-js .tmy-header--overlay:not(.is-ink) .tmy-lang {
  border-color: rgba(255, 255, 255, .45);
}

.tmy-lang--dark {
  border-color: var(--paper-30);
  color: var(--paper);
}

.tmy-lang--dark .tmy-lang__item {
  padding: 9px 14px;
}

/* Burger: two lines, the lower one shorter. Shown at 860px and below. */
.tmy-burger {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  width: 48px;
  height: 48px;
  color: inherit;
}

.tmy-burger:hover {
  color: inherit;
}

.tmy-burger i {
  display: block;
  width: 28px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: width .55s var(--ease-io), transform .55s var(--ease-io);
}

.tmy-burger i + i {
  width: 17px;
}

/* Open, the two lines cross. The panel covers them, so this shows while it
   is still opening. */
.tmy-burger[aria-expanded="true"] i {
  width: 26px;
  transform: translateY(5px) rotate(45deg);
}

.tmy-burger[aria-expanded="true"] i + i {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 860px) {
  .tmy-nav,
  .tmy-header__lang,
  .tmy-header__cta {
    display: none;
  }

  .tmy-burger {
    display: flex;
  }

  .tmy-header__logo {
    height: 62px;
  }
}

/* --------------------------------------------------------------------------
   Full-screen menu

   Drops down from the top. Opens with the burger (app.js) or, without
   JavaScript, through its #tmy-menu anchor (:target).
   -------------------------------------------------------------------------- */

.tmy-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(18px, 4vh, 34px);
  padding: 16px clamp(16px, 5vw, 40px) clamp(26px, 7vw, 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink);
  color: var(--paper);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .62s var(--ease-io), visibility 0s linear .62s;
}

.tmy-menu.is-open,
html:not(.tmy-js) .tmy-menu:target {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path .62s var(--ease-io);
}

.tmy-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 62px;
}

.tmy-menu__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--paper-55);
}

.tmy-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--paper-28);
  border-radius: var(--radius-pill);
  color: var(--paper);
  font-size: 17px;
  line-height: 1;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.tmy-menu__close:hover {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.tmy-menu__nav ul {
  display: flex;
  flex-direction: column;
}

.tmy-menu__nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-12);
  color: var(--paper);
  font-size: var(--fs-menu);
  font-weight: var(--fw-thin);
  letter-spacing: var(--ls-display);
  line-height: 1.15;
}

/* A square in the logo colours marks each item. */
.tmy-menu__nav a::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--magenta);
}

.tmy-menu__nav li:nth-child(5n + 2) a::before { background: var(--amber); }
.tmy-menu__nav li:nth-child(5n + 3) a::before { background: var(--acc); }
.tmy-menu__nav li:nth-child(5n + 4) a::before { background: var(--purple); }
.tmy-menu__nav li:nth-child(5n + 5) a::before { background: var(--green); }

.tmy-menu__nav a:hover,
.tmy-menu__nav .current-menu-item > a,
.tmy-menu__nav .current_page_item > a {
  color: var(--acc);
}

.tmy-menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.tmy-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--fw-light);
}

.tmy-menu__phone {
  color: var(--paper);
}

.tmy-menu__email {
  color: var(--paper-72);
}

.tmy-menu__address {
  font-size: var(--fs-label);
  letter-spacing: .12em;
  color: var(--paper-55);
}

/* Items rise in one after another once the panel has started to open. */
.tmy-js .tmy-menu__nav li,
.tmy-js .tmy-menu__foot > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease, transform .6s var(--ease-io);
}

.tmy-js .tmy-menu.is-open .tmy-menu__nav li,
.tmy-js .tmy-menu.is-open .tmy-menu__foot > * {
  opacity: 1;
  transform: none;
}

.tmy-menu.is-open .tmy-menu__nav li:nth-child(1) { transition-delay: .15s; }
.tmy-menu.is-open .tmy-menu__nav li:nth-child(2) { transition-delay: .215s; }
.tmy-menu.is-open .tmy-menu__nav li:nth-child(3) { transition-delay: .28s; }
.tmy-menu.is-open .tmy-menu__nav li:nth-child(4) { transition-delay: .345s; }
.tmy-menu.is-open .tmy-menu__nav li:nth-child(5) { transition-delay: .41s; }
.tmy-menu.is-open .tmy-menu__nav li:nth-child(6) { transition-delay: .475s; }
.tmy-menu.is-open .tmy-menu__nav li:nth-child(7) { transition-delay: .54s; }
.tmy-menu.is-open .tmy-menu__nav li:nth-child(n + 8) { transition-delay: .6s; }
.tmy-menu.is-open .tmy-menu__foot > :nth-child(1) { transition-delay: .6s; }
.tmy-menu.is-open .tmy-menu__foot > :nth-child(2) { transition-delay: .665s; }

@media (prefers-reduced-motion: reduce) {
  .tmy-menu,
  .tmy-menu.is-open {
    transition: none;
  }

  .tmy-js .tmy-menu__nav li,
  .tmy-js .tmy-menu__foot > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Footer

   Contact details in columns, then the wordmark, the main menu and the small
   print. Social and services menus become extra columns when assigned.
   -------------------------------------------------------------------------- */

.tmy-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(60px, 10vh, 120px) var(--gutter) 0;
}

.tmy-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
}

.tmy-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-lg);
  padding-bottom: clamp(40px, 6vh, 72px);
  border-bottom: 1px solid var(--paper-14);
}

.tmy-footer__label {
  margin-bottom: 12px;
  font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--paper-55);
}

.tmy-footer__value,
.tmy-footer__links {
  font-size: 16px;
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
}

.tmy-footer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tmy-footer__value a,
.tmy-footer__links a {
  color: var(--paper);
}

.tmy-footer__value a:hover,
.tmy-footer__links a:hover {
  color: var(--acc);
}

.tmy-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 36px;
}

.tmy-footer__mark {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: var(--fw-thin);
  letter-spacing: .14em;
  line-height: 1.2;
}

.tmy-footer__mark span {
  color: var(--acc);
}

.tmy-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(14px, 2vw, 28px);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
}

.tmy-footer__nav a {
  color: var(--paper-70);
}

.tmy-footer__nav a:hover,
.tmy-footer__nav .current-menu-item > a,
.tmy-footer__nav .current_page_item > a {
  color: var(--paper);
}

/* Its own line in the bar, the whole width of it, so the legal links can
   close the row under the menu above them. */
.tmy-footer__small {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--paper-55);
}

/* The credit and the legal links are set small, so each gets a tap area at
   least 24px tall (WCAG 2.5.8) without the text growing. */
.tmy-footer__by a,
.tmy-footer__legal a {
  display: inline-block;
  padding: 4px 0;
}

/* The studio credit, beside the copyright and as quiet as it. The underline
   sits on the text, not on the edge of the padded box. */
.tmy-footer__by a {
  color: var(--paper-55);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .35s, text-decoration-color .35s;
}

.tmy-footer__by a:hover {
  color: var(--paper);
  text-decoration-color: var(--paper-40);
}

/* The legal links close the row at the far end, away from the copyright.
   Once the row stacks they take their place in the column instead. */
.tmy-footer__legal {
  margin-left: auto;
}

@media (max-width: 860px) {
  .tmy-footer__legal {
    margin-left: 0;
  }
}

.tmy-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.tmy-footer__legal a {
  color: var(--paper-55);
}

.tmy-footer__legal a:hover {
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   Scroll-reveal utilities
   -------------------------------------------------------------------------- */

/* Hidden only when JavaScript is there to reveal it (tmy-js on <html>). */
.tmy-js .tmy-rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.tmy-js .tmy-rv.is-in {
  opacity: 1;
  transform: none;
}

/* Hero headline: each line lifts out of its own mask. */
@keyframes tmy-lift {
  from { transform: translateY(112%) skewY(3.5deg); }
  to   { transform: translateY(0) skewY(0); }
}

@keyframes tmy-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes tmy-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes tmy-curtain {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.14); }
  to   { clip-path: inset(0 0 0 0); transform: scale(1); }
}

@keyframes tmy-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes tmy-scrollhint {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

.tmy-in {
  opacity: 0;
  animation: tmy-up 1s var(--ease) forwards;
}

/* Accent underline that wipes in beneath a highlighted word. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .tmy-in,
  .tmy-hero__media {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .tmy-js .tmy-rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Fallback templates (index.php) — replaced by the designed inner pages in
   the next phase.
   -------------------------------------------------------------------------- */

.tmy-basic {
  max-width: 900px;
  margin: 0 auto;
  padding: 200px var(--gutter) 120px;
}

.tmy-basic__head {
  margin-bottom: 50px;
}

.tmy-basic__desc {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 300;
  color: var(--ink-65);
}

.tmy-basic__figure {
  margin: 0 0 40px;
}

.tmy-basic__list {
  display: flex;
  flex-direction: column;
}

.tmy-basic__item {
  padding: 34px 0;
  border-bottom: 1px solid var(--ink-14);
}

.tmy-basic__item p {
  margin-top: 8px;
  font-weight: 300;
  color: var(--ink-65);
}

.tmy-basic__empty {
  font-size: 19px;
  font-weight: 300;
  color: var(--ink-65);
  margin-bottom: 30px;
}

.tmy-prose > * + * {
  margin-top: 1.2em;
}

.tmy-prose h2,
.tmy-prose h3 {
  margin-top: 1.8em;
  font-weight: 400;
  letter-spacing: -.03em;
}

.tmy-prose a {
  color: var(--acct);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tmy-prose ul,
.tmy-prose ol {
  padding-left: 1.3em;
  list-style: revert;
}

.tmy-prose blockquote {
  padding-left: 22px;
  border-left: 2px solid var(--acc);
  font-size: 19px;
  font-weight: 300;
}

.tmy-basic .pagination,
.tmy-basic .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 50px;
  font-weight: 600;
}

.tmy-basic .nav-links .page-numbers {
  padding: 10px 16px;
  border: 1px solid var(--ink-20);
  border-radius: 999px;
  font-size: 14px;
}

.tmy-basic .nav-links .page-numbers.current {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

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

   As in the design: small uppercase captions, underline fields, a bordered
   message box and a square dark button. Used inline on the contact page and
   inside the modal everywhere else, so it is styled in base.css rather than
   pages.css.
   -------------------------------------------------------------------------- */

.tmy-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tmy-form__title {
  max-width: 20ch;
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: pretty;
}

.tmy-form__lead {
  max-width: 40ch;
  margin-top: -8px;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--ink-72);
  text-wrap: pretty;
}

.tmy-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
}

.tmy-form__field,
.tmy-form label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* Field captions only — the consent sentence must stay a sentence. */
.tmy-form__field label > span {
  font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

.tmy-form input[type='text'],
.tmy-form input[type='email'],
.tmy-form input[type='tel'],
.tmy-form select,
.tmy-form textarea {
  width: 100%;
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--ink-30);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-light);
  color: var(--ink);
  padding: 10px 0;
  outline: none;
  transition: border-color var(--dur-fast) ease;
}

.tmy-form textarea {
  min-height: 140px;
  padding: 14px;
  border: 1px solid var(--ink-30);
  line-height: var(--lh-body);
  resize: vertical;
}

.tmy-form input:focus,
.tmy-form select:focus,
.tmy-form textarea:focus {
  border-color: var(--acc);
}

.tmy-form input.is-invalid,
.tmy-form select.is-invalid,
.tmy-form textarea.is-invalid {
  border-color: var(--danger);
}

.tmy-form input::placeholder,
.tmy-form textarea::placeholder {
  color: var(--ink-40);
}

.tmy-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230B0B0C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
  padding-right: 30px;
  cursor: pointer;
}

/* Needs the element too: ".tmy-form label" above would otherwise win and
   stack the checkbox above its wording. */
.tmy-form label.tmy-form__consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: var(--fs-small);
  line-height: 1.55;
  font-weight: var(--fw-light);
  color: var(--ink-68);
}

.tmy-form__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--acct);
  cursor: pointer;
}

.tmy-form__consent a {
  color: var(--acct);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tmy-form__error {
  font-size: 13px;
  color: var(--danger);
}

/* Off-viewport rather than display:none, which some bots detect. */
.tmy-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tmy-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.tmy-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: none;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.tmy-form__submit:hover:not(:disabled),
.tmy-form__submit:focus-visible {
  background: var(--acct);
  color: var(--white);
}

.tmy-form__submit:disabled {
  opacity: .55;
  cursor: progress;
}

.tmy-form__submit.is-busy .tmy-form__arrow {
  display: none;
}

.tmy-form__note {
  font-size: 13px;
  font-weight: var(--fw-light);
  color: var(--ink-62);
}

/* Three dots standing in for the ellipsis while the button works. */
.tmy-form__dots {
  display: none;
  align-items: center;
  gap: 4px;
}

.tmy-form__submit.is-busy .tmy-form__dots {
  display: inline-flex;
}

.tmy-form__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  animation: tmy-blink 1.1s infinite;
}

.tmy-form__dots i:nth-child(2) {
  animation-delay: .18s;
}

.tmy-form__dots i:nth-child(3) {
  animation-delay: .36s;
}

@keyframes tmy-blink {
  0%, 100% { opacity: .25; }
  40%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the dots as a busy marker, drop the blinking. */
  .tmy-form__dots i {
    animation: none;
    opacity: .6;
  }
}

/* Names the listing an enquiry is attached to, when opened from one. */
.tmy-form__listing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 16px;
  border-left: 2px solid var(--acc);
  background: var(--paper-2);
}

.tmy-form__listing span {
  font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

.tmy-form__listing strong {
  font-size: 16px;
  font-weight: var(--fw-medium);
}

.tmy-form__notice {
  padding: 16px 20px;
  border-left: 2px solid var(--acc);
  background: var(--paper-2);
  font-size: 15px;
  font-weight: var(--fw-light);
}

.tmy-form__notice--error {
  border-left-color: var(--danger);
}

.tmy-form__done {
  padding: 34px 0;
}

.tmy-form__done-title {
  margin-bottom: 12px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-heading);
}

.tmy-form__done p + p {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--ink-65);
}

.tmy-form__done:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Form modal
   -------------------------------------------------------------------------- */

.tmy-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}

.tmy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--ink-55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s ease;
}

.tmy-modal.is-open .tmy-modal__backdrop {
  opacity: 1;
}

.tmy-modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 1px solid var(--ink-14);
  padding: clamp(24px, 3vw, 44px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform .55s var(--ease);
}

.tmy-modal.is-open .tmy-modal__panel {
  opacity: 1;
  transform: none;
}

.tmy-modal__eyebrow {
  margin-bottom: 20px;
  padding-right: 56px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--ink-62);
}

.tmy-modal .tmy-form__title {
  font-size: clamp(26px, 3vw, 42px);
}

.tmy-modal__close {
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-20);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.tmy-modal__close:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .tmy-modal__backdrop,
  .tmy-modal__panel {
    transition: none;
  }
}

@media (max-width: 700px) {
  .tmy-modal__panel {
    max-height: 94vh;
  }
}

/* --------------------------------------------------------------------------
   Floating "ask for a quote" button

   Only where the header's own call-to-action is hidden (below 1240px). Sits
   under the header, menu, lightbox and modal in the stacking order, and steps
   aside entirely whenever any of those locks the page.
   -------------------------------------------------------------------------- */

.tmy-fab {
  display: none;
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(11, 11, 12, .28);
  opacity: 0;
  transform: translateY(20px) scale(.94);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .55s var(--ease), background .35s, color .35s;
}

@media (max-width: 1240px) {
  .tmy-fab {
    display: inline-flex;
  }
}

/* Revealed once the hero's own buttons have scrolled away. */
.tmy-fab.is-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tmy-fab:hover,
.tmy-fab:focus-visible {
  background: var(--acc);
  color: #fff;
}

/*
 * The menu, the lightbox and the form modal all lock the page this way. None
 * of them should have a button floating over them.
 */
body.tmy-no-scroll .tmy-fab {
  opacity: 0;
  transform: translateY(20px) scale(.94);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tmy-fab {
    transition: opacity .2s;
    transform: none;
  }

  .tmy-fab.is-in {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Axis lines

   Two rules that draw themselves and meet near a corner. The vertical is drawn
   from the top and the horizontal from the left, the second starting slightly
   later so they arrive at the intersection together.

   Offsets are custom properties, so each placement can sit the crossing where
   its own composition wants it.
   -------------------------------------------------------------------------- */

/*
 * The transition lives on each line, not on this shared rule: as `.tmy-axis i`
 * it would out-specify `.tmy-axis__h` and reset the stagger back to zero.
 */
/*
 * The container carries .tmy-rv only to borrow the reveal observer; the fade
 * and lift that class normally applies would move the lines off their corner.
 */
.tmy-axis.tmy-rv {
  opacity: 1;
  transform: none;
  transition: none;
}

/* The front page hero is on screen already, so it draws on load. */
@keyframes tmy-axis-v {
  to { transform: scaleY(1); }
}

@keyframes tmy-axis-h {
  to { transform: scaleX(1); }
}

@media (max-width: 860px) {
  /*
   * Retired on small screens. The front page hero stacks below this width and
   * becomes far taller than the viewport, so the vertical rule would run the
   * whole length of the page rather than framing a composition.
   */
  }

@media (prefers-reduced-motion: reduce) {
  /* Keep the lines, drop the drawing. */
  }

/* --------------------------------------------------------------------------
   Hero

   Shared by the front page, the archives and the project, property and post
   pages. The section is taller than the screen and its stage is sticky, so the
   photo settles and the words move apart while it scrolls away (app.js).
   Without JavaScript, or with reduced motion, it is simply a full screen.
   -------------------------------------------------------------------------- */

.tmy-hero {
  --hero-zoom: 1.18;
  position: relative;
  height: 150vh;
  background: var(--ink);
}

.tmy-hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--white);
}

.tmy-hero__media,
.tmy-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tmy-js .tmy-hero__img {
  transform: scale(var(--hero-zoom));
  will-change: transform;
}

/* The middle stop is the band the two words sit in, so it carries most of the
   contrast; raise --hero-dim to darken the photo further. app.js lifts the
   whole veil from .85 to 1 while the hero scrolls away. */
.tmy-hero__veil {
  --hero-dim: .48;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, .68) 0%, rgba(11, 11, 12, var(--hero-dim)) 45%, rgba(11, 11, 12, .82) 100%);
}

/* Where the scroll effect will run, the veil starts where app.js takes it
   from, so its first pass (after the first frame) changes nothing. */
@media (prefers-reduced-motion: no-preference) {
  .tmy-js .tmy-hero__veil {
    opacity: .85;
  }
}

/* The photo fills the whole 100vh stage; the words stay within the part of it
   a phone shows below its address bar (--vh-gap). */
.tmy-hero__body {
  position: absolute;
  inset: 0 0 var(--vh-gap);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
}

.tmy-hero__overline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(14px, 2vh, 26px);
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .26em;
  text-transform: uppercase;
}

.tmy-hero__overline::before {
  content: '';
  flex: none;
  width: 56px;
  height: 1px;
  background: var(--acc);
}

.tmy-hero__title {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-display);
  font-weight: var(--fw-thin);
  text-transform: uppercase;
}

.tmy-hero__word {
  display: block;
  line-height: .86;
  letter-spacing: var(--ls-display);
  white-space: nowrap;
  will-change: transform;
}

/* The second word is drawn as an outline. The design sets a 1px stroke at 85%
   white; here it is thicker, so it holds up over a busy photo. Lower
   --hero-stroke to fade the word back. */
.tmy-hero__word--outline {
  --hero-stroke: 1;
  align-self: flex-end;
  line-height: .9;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, var(--hero-stroke));
}

/* A page or archive name over a photo (photo-hero.php). It stays on one line
   when it fits; a longer name breaks between words, in balanced lines. A
   single word too long for the screen is set smaller: --hero-chars is the
   length of the longest word, and .66em is about the widest a capital runs in
   this face, so that word always fits the width between the gutters. */
.tmy-hero__title--fit {
  --hero-fit: calc((100vw - 2 * var(--gutter)) / (var(--hero-chars, 1) * .66));
  font-size: min(var(--fs-display), var(--hero-fit));
}

/* Measured against the text column itself where container units exist, so a
   desktop scrollbar does not count as room. */
@supports (width: 1cqi) {
  .tmy-hero--archive .tmy-hero__body {
    container-type: inline-size;
  }

  .tmy-hero__title--fit {
    --hero-fit: calc(100cqi / (var(--hero-chars, 1) * .66));
  }
}

.tmy-hero__title--fit .tmy-hero__word {
  white-space: normal;
  text-wrap: balance;
}

.tmy-hero__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--vh-gap);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: 0 var(--gutter) clamp(24px, 5vh, 52px);
}

.tmy-hero__lead {
  max-width: 44ch;
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: rgba(255, 255, 255, .94);
  text-wrap: pretty;
}

.tmy-hero__cue {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

.tmy-hero__cue i {
  position: relative;
  width: 1px;
  height: 54px;
  overflow: hidden;
  background: rgba(255, 255, 255, .28);
}

.tmy-hero__cue i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--magenta);
  animation: tmy-cue 2.2s cubic-bezier(.7, 0, .3, 1) infinite;
}

@keyframes tmy-cue {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

/* --------------------------------------------------------------------------
   Hero variants

   The archives carry one word instead of two; the project, property and post
   pages set their title against the foot of the photo.
   -------------------------------------------------------------------------- */

.tmy-hero--archive {
  --hero-zoom: 1.14;
  height: 125vh;
}

.tmy-hero--archive .tmy-hero__veil {
  --hero-dim: .52;
  background: linear-gradient(180deg, rgba(11, 11, 12, .7) 0%, rgba(11, 11, 12, var(--hero-dim)) 45%, rgba(11, 11, 12, .86) 100%);
}

.tmy-hero--single {
  --hero-zoom: 1.12;
  height: 120vh;
}

.tmy-hero--single .tmy-hero__veil {
  --hero-dim: .5;
  background: linear-gradient(180deg, rgba(11, 11, 12, .62) 0%, rgba(11, 11, 12, var(--hero-dim)) 45%, rgba(11, 11, 12, .9) 100%);
}

/* The entry's name sits at the foot of the photo, not its middle. */
.tmy-hero__body--bottom {
  justify-content: flex-end;
  gap: clamp(16px, 2.6vh, 28px);
  padding-bottom: clamp(48px, 8vh, 96px);
}

.tmy-hero__back {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

.tmy-hero__back:hover {
  color: var(--white);
}

.tmy-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

.tmy-hero__dot {
  width: 9px;
  height: 9px;
  background: var(--tone, var(--acc));
}

.tmy-hero__sep {
  color: rgba(255, 255, 255, .4);
}

/* «Σε εξέλιξη» on a project still being built, ahead of the meta row. */
.tmy-hero__badge {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--white);
}

.tmy-hero__name {
  max-width: 22ch;
  font-size: var(--fs-h1);
  font-weight: var(--fw-thin);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .tmy-hero__title {
    font-size: clamp(34px, 12.5vw, 64px);
  }

  .tmy-hero__title--fit {
    font-size: min(clamp(34px, 12.5vw, 64px), var(--hero-fit));
  }

  /* An outline draws two lines per stem, so it carries more ink than the
     solid word beside it. At this size the stems are about 1.9px, and the
     stroke has to stay under half of that for the two words to read as one
     weight. */
  .tmy-hero__word--outline {
    --hero-stroke: .78;
    align-self: flex-start;
    -webkit-text-stroke-width: .75px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmy-hero__cue i::after {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Figures — the counting numbers, shared by the home and company pages
   -------------------------------------------------------------------------- */

.tmy-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-12);
}

.tmy-stat {
  padding: clamp(22px, 3vw, 38px);
  background: var(--paper);
}

.tmy-stat__value {
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: var(--fw-thin);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tmy-stat:nth-child(4n + 1) .tmy-stat__unit { color: var(--green-t); }
.tmy-stat:nth-child(4n + 2) .tmy-stat__unit { color: var(--magenta-t); }
.tmy-stat:nth-child(4n + 3) .tmy-stat__unit { color: var(--acct); }
.tmy-stat:nth-child(4n + 4) .tmy-stat__unit { color: var(--amber-t); }

/* A unit spelled out ("τμ") sits smaller beside the number; a "+" matches it. */
.tmy-stat__unit--word {
  margin-left: .12em;
  font-size: .5em;
  letter-spacing: 0;
}

.tmy-stat__label {
  margin-top: 10px;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-62);
}

@media (max-width: 560px) {
  .tmy-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}