/* ==========================================================================
   TMY — inner pages: archives, singles, blog, static pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Archive intro — a heading that stays in place beside the text
   -------------------------------------------------------------------------- */

.tmy-aintro {
  padding: clamp(70px, 11vh, 140px) var(--gutter) clamp(40px, 6vh, 72px);
  border-top: 1px solid var(--ink-10);
}

.tmy-aintro__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-xl);
  align-items: start;
}

.tmy-aintro__head {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
}

.tmy-aintro__title {
  max-width: 18ch;
}

.tmy-aintro__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 66ch;
}

.tmy-aintro__p {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink-72);
  text-wrap: pretty;
}

/* The opening paragraph carries the section, so it reads a size up in ink. */
.tmy-aintro__p--lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Archive index — filter pills over a grid of cards
   -------------------------------------------------------------------------- */

.tmy-index {
  padding: clamp(40px, 6vh, 72px) var(--gutter) clamp(60px, 9vh, 120px);
}

.tmy-index__title {
  max-width: 20ch;
}

.tmy-index__filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The select is the phone's filter; the pills take over from 700px up. */
.tmy-index__select {
  max-width: 320px;
}

.tmy-index__select select {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--ink-25);
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}

.tmy-pills {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
}

.tmy-pill {
  padding: 10px 18px;
  border: 1px solid var(--ink-25);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.tmy-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.tmy-pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.tmy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.tmy-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink-14);
  transition: border-color var(--dur) ease, transform var(--dur) var(--ease);
}

.tmy-card:hover {
  border-color: var(--ink-40);
  color: var(--ink);
  transform: translateY(-4px);
}

/* Filtered out server-side or by the script; the attribute rule still wins. */
.tmy-card.is-out {
  display: none;
}

.tmy-card__media {
  overflow: hidden;
  background: var(--line);
  border-left: 6px solid var(--tone, var(--acc));
}

/* An entry with no photo keeps the card's proportions with a ruled panel. */
.tmy-card__media--empty {
  height: 260px;
  background: repeating-linear-gradient(to top, var(--ink-10) 0 1px, transparent 1px 34px), var(--paper-2);
}

.tmy-card__img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.tmy-card:hover .tmy-card__img {
  transform: scale(1.06);
}

.tmy-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 32px);
}

.tmy-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-62);
}

.tmy-card__dot {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--tone, var(--acc));
}

.tmy-card__sep {
  color: var(--ink-30);
}

.tmy-card__title {
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: var(--fw-light);
  line-height: 1.24;
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}

.tmy-card__text {
  font-size: 14px;
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--ink-65);
  text-wrap: pretty;
}

/* The bottom row is pushed down so every card in a row ends on the same line. */
.tmy-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ink-12);
  font-size: var(--fs-label-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-62);
}

.tmy-index__empty {
  padding: clamp(40px, 8vh, 80px) 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--ink-62);
}

@media (min-width: 701px) {
  .tmy-index__select {
    display: none;
  }

  .tmy-pills {
    display: flex;
  }
}

@media (max-width: 860px) {
  .tmy-aintro__head {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Single: sticky intro + hero, body slides over
   -------------------------------------------------------------------------- */

.tmy-stack {
  position: relative;
}

.tmy-crumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(11, 11, 12, .5);
  margin-bottom: 34px;
}

.tmy-crumbs li + li::before {
  content: '/';
  margin-right: 10px;
  color: var(--ink-25);
}

/*
 * One source of truth for the hero height and the overlap that matches it.
 * Declared on :root, not on .tmy-stack — the overlap is applied to the stack's
 * SIBLING, which cannot inherit a variable set on the stack itself.
 */
:root {
  --tmy-hero-h: 78vh;
}

/*
 * The article design uses a slightly shorter hero than the project and
 * property views. Overridden at each breakpoint alongside the :root ladder.
 */
.single-post {
  --tmy-hero-h: 72vh;
}

/* Inset from the gutters, like the About hero. */
/* A shallower band than the front page hero, so the crossing sits higher. */
/*
 * Absorbs the negative margin on the body that follows. Without it the body
 * sits straight over the image and the hero is never seen at all.
 */
/*
 * The frame clips open while the image eases out of its own zoom — the
 * homepage's tmy-curtain scales the frame instead, which is not what the
 * single-view designs do.
 */
/* Sections that ride over the sticky hero. */
/* Pull the body up over the sticky hero. */
.tmy-stack + .tmy-sbody,
.tmy-stack + .tmy-article {
  margin-top: calc(var(--tmy-hero-h) * -1);
}

/* No hero image means nothing to slide over. */
.tmy-stack--flat + .tmy-sbody,
.tmy-stack--flat + .tmy-article {
  margin-top: 0;
}

/*
 * When the section menu is present it is the first thing to slide over the
 * hero, so it takes the overlap and the body simply follows it.
 */
.tmy-stack + .tmy-subnav {
  margin-top: calc(var(--tmy-hero-h) * -1);
}

.tmy-stack--flat + .tmy-subnav {
  margin-top: 0;
}

/* Cross-link to a related project */
.tmy-crosslink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 50px;
  padding: 26px 28px;
  background: var(--paper-2);
  transition: background .4s;
}

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

.tmy-crosslink__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acct);
}

.tmy-crosslink:hover .tmy-crosslink__label {
  color: var(--acc);
}

.tmy-crosslink__title {
  display: block;
  margin-top: 8px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 300;
  letter-spacing: -.03em;
}

.tmy-crosslink__arrow {
  font-size: 22px;
  flex: none;
}

/* Floor plans */
.tmy-plans {
  margin-top: 70px;
  padding-top: 30px;
  border-top: 1px solid var(--ink-14);
}

.tmy-plans__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}

.tmy-plans__head h2 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acct);
}

.tmy-plans__type {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-62);
}

.tmy-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(11, 11, 12, .12);
}

.tmy-plan__label {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: 16.5px;
  font-weight: 300;
  min-width: 0;
}

.tmy-plan__no {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--acct);
  flex: none;
}

.tmy-plan__name {
  overflow-wrap: anywhere;
}

.tmy-plan__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--ink-62);
  flex: none;
}

.tmy-plan__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* One link opens the PDF in a new tab, the other saves it. */
.tmy-plan__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--ink-20);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: background .35s, color .35s, border-color .35s;
}

.tmy-plan__btn:hover,
.tmy-plan__btn:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.tmy-plan__ico {
  font-size: 13px;
  line-height: 1;
}

@media (max-width: 700px) {
  .tmy-plan {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .tmy-plan__meta {
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Videos and map (click-to-load facades)
   -------------------------------------------------------------------------- */

.tmy-videos__head,
.tmy-map__head,
.tmy-gallery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--ink-14);
}

.tmy-videos__head h2,
.tmy-gallery__head h2,
.tmy-map__head h2 {
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 300;
}

.tmy-videos__count,
.tmy-gallery__count {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink-62);
}

.tmy-videos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  padding-top: 16px;
  justify-items: center;
}

/*
 * The size cap lives on the frame rather than the grid so the frame can be
 * centred in its track. Left at full section width a lone video renders taller
 * than the viewport on a wide monitor; the vh term keeps it on screen on short
 * displays, since at 16/9 a 72vh-tall frame is 128vh wide.
 */
.tmy-video {
  position: relative;
  display: block;
  width: 100%;
  max-width: min(1180px, 128vh);
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  cursor: pointer;
}

/*
 * A vertical video in a 16/9 frame is mostly black bars, and on a phone the
 * frame collapses to a couple of hundred pixels tall. Editors declare the
 * orientation per row, so the frame can take the video shape.
 */
.tmy-video--portrait {
  aspect-ratio: 9 / 16;
  max-width: min(420px, 42vh);
}

.tmy-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.tmy-video:hover .tmy-video__poster {
  transform: scale(1.04);
}

.tmy-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 247, 245, .6);
  border-radius: 50%;
  background: rgba(11, 11, 12, .35);
  color: var(--paper);
  font-size: 20px;
  cursor: pointer;
  transition: background .35s, color .35s;
}

.tmy-video:hover .tmy-video__play {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}

.tmy-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * Full section width, with the height capped so a wide monitor does not get a
 * 16/9 block taller than the viewport. The cap only bites above roughly
 * 1080px; narrower screens keep the natural ratio.
 *
 * A short, wide frame makes the embed fit a wider area — see the bbox in
 * template-parts/single/map.php, which is deliberately shallow to match.
 */
.tmy-map__frame {
  position: relative;
  margin-top: 16px;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(600px, 62vh);
  background: var(--paper-2);
  overflow: hidden;
}

@media (max-width: 700px) {
  /* A 16/9 strip is only a couple of hundred pixels tall on a phone, which is
     too cramped to read or pan once the embed loads. */
  .tmy-map__frame {
    aspect-ratio: 4 / 3;
  }
}

.tmy-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tmy-map__load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .35s;
}

.tmy-map__load:hover {
  background: rgba(15, 163, 226, .08);
}

.tmy-map__load small {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink-62);
}

.tmy-map__pin {
  color: var(--acc);
  font-size: 22px;
}

.tmy-map__address {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-62);
}

/* --------------------------------------------------------------------------
   Gallery + lightbox
   -------------------------------------------------------------------------- */

.tmy-lightbox[hidden] {
  display: none;
}

.tmy-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(11, 11, 12, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 70px);
  cursor: zoom-out;
}

.tmy-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}

/* Fades out towards the direction of travel, then in from the other side. */
.tmy-lightbox img.is-swapping {
  opacity: 0;
}

.tmy-lightbox img.is-left  { transform: translateX(-30px); }
.tmy-lightbox img.is-right { transform: translateX(30px); }

/* The jump to the far side must not animate; only the return to centre does. */
.tmy-lightbox img.is-still {
  transition: none;
}

/*
 * Stepping controls. They sit above the backdrop, which closes on click, so
 * their handlers stop propagation.
 */
.tmy-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0 0 4px;
  border: 1px solid rgba(247, 247, 245, .35);
  border-radius: 50%;
  background: rgba(11, 11, 12, .45);
  color: var(--paper);
  font-family: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s, border-color .3s;
}

.tmy-lightbox__nav:hover,
.tmy-lightbox__nav:focus-visible {
  background: var(--acc);
  border-color: var(--acc);
}

.tmy-lightbox__nav--prev { left: clamp(10px, 3vw, 40px); }
.tmy-lightbox__nav--next { right: clamp(10px, 3vw, 40px); }

@media (max-width: 700px) {
  .tmy-lightbox__nav {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
}

.tmy-lightbox__close {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border: 0;
  background: none;
  color: var(--paper-70);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Next entry
   -------------------------------------------------------------------------- */

.tmy-nextwrap {
  padding-bottom: 120px;
}

.tmy-next {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-top: 40px;
  border-top: 1px solid var(--ink-14);
}

.tmy-next__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acct);
  margin-bottom: 14px;
}

.tmy-next__title {
  display: block;
  font-size: clamp(28px, 3.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 300;
}

.tmy-next__all {
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--ink-25);
  padding-bottom: 6px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

.tmy-toc__title,
.tmy-share__title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acct);
  margin-bottom: 16px;
}

.tmy-toc ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--ink-14);
}

.tmy-toc a {
  display: block;
  padding: 4px 0 4px 18px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-62);
  transition: color .3s, border-color .3s;
}

.tmy-toc a:hover,
.tmy-toc a.is-current {
  color: var(--ink);
  border-left-color: var(--acc);
}

.tmy-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tmy-share__title {
  width: 100%;
  margin-bottom: 6px;
}

.tmy-share a,
.tmy-share button {
  border: 1px solid var(--ink-20);
  border-radius: 999px;
  background: none;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
  cursor: pointer;
  transition: background .35s, color .35s, border-color .35s;
}

.tmy-share a:hover,
.tmy-share button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Copying is a script's job: without one the button would do nothing. */
html:not(.tmy-js) .tmy-share__copy {
  display: none;
}

/* The outcome, on its own line under the buttons. It stays in the page
   while empty — a live region has to be there before it speaks — and an
   empty line takes no height. */
.tmy-share__status {
  width: 100%;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-80);
}

.tmy-share__status:empty {
  margin-top: 0;
}

.tmy-share__status.is-error {
  color: var(--ink);
}

/* The block sits at the end of the text, ruled off from the reading. */
.tmy-share--end {
  margin-top: clamp(44px, 6vh, 72px);
  padding-top: 26px;
  border-top: 1px solid var(--ink-10);
}

.tmy-article__lead {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink-80);
  margin-bottom: 36px;
  text-wrap: pretty;
}

.tmy-article__body .tmy-prose {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(11, 11, 12, .78);
}

.tmy-article__body .tmy-prose h2 {
  margin-top: 2em;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  letter-spacing: -.035em;
  scroll-margin-top: 140px;
}

.tmy-article__body .tmy-prose blockquote {
  margin: 1.6em 0;
  padding-left: 26px;
  border-left: 2px solid var(--acc);
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.45;
  font-weight: 300;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Static pages
   -------------------------------------------------------------------------- */

.tmy-pagebody {
  padding-top: 70px;
}

.tmy-pagebody .tmy-prose,
.tmy-story__body {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(11, 11, 12, .78);
}

.tmy-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Numbered legal document */
.tmy-doc {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 80px;
  align-items: start;
  padding-top: 70px;
}

.tmy-doc__toc {
  position: sticky;
  top: 150px;
}

.tmy-doc__toc ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tmy-doc__toc a {
  display: flex;
  gap: 14px;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-62);
  transition: color .3s;
}

.tmy-doc__toc a span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--acct);
}

.tmy-doc__toc a:hover,
.tmy-doc__toc a.is-current {
  color: var(--ink);
}

.tmy-prose--doc {
  max-width: 72ch;
  counter-reset: tmy-doc;
}

.tmy-prose--doc h2 {
  display: flex;
  gap: 18px;
  margin-top: 2.4em;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -.03em;
  scroll-margin-top: 140px;
  counter-increment: tmy-doc;
}

.tmy-prose--doc h2::before {
  content: counter(tmy-doc, decimal-leading-zero);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--acct);
  padding-top: .55em;
}

/* --------------------------------------------------------------------------
   Company page — ποιοι είμαστε

   The heading and the figures stay in place beside the text, and the detail
   photo breaks the text after the second paragraph.
   -------------------------------------------------------------------------- */

.tmy-about2 {
  padding: clamp(80px, 12vh, 150px) var(--gutter);
  border-top: 1px solid var(--ink-10);
}

.tmy-about2__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-xl);
  align-items: start;
}

.tmy-about2__aside {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
}

.tmy-about2__title {
  max-width: 18ch;
  margin-bottom: 34px;
}

.tmy-about2__stats {
  max-width: 460px;
  border: 1px solid var(--ink-12);
}

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

.tmy-about2__p {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink-72);
  text-wrap: pretty;
}

/* The opening paragraph carries the section, so it reads larger and in ink. */
.tmy-about2__p--lead {
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.55;
  color: var(--ink);
}

.tmy-about2__media {
  margin: 8px 0;
  line-height: 0;
}

.tmy-about2__img {
  width: 100%;
  height: clamp(240px, 42vh, 460px);
  object-fit: cover;
}

.tmy-about2__prose {
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   Τι κατασκευάζουμε
   -------------------------------------------------------------------------- */

.tmy-typo {
  --label-color: var(--paper-55);
  padding: clamp(60px, 9vh, 110px) var(--gutter);
  background: var(--ink);
  color: var(--paper);
}

.tmy-typo__label {
  margin-bottom: clamp(28px, 4vh, 48px);
}

.tmy-typo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.tmy-typo__card {
  padding: clamp(26px, 3vw, 44px);
  border: 1px solid var(--paper-18);
  border-top: 3px solid var(--tone, var(--acc));
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
  transition: background var(--dur) ease;
}

.tmy-typo__card:hover {
  background: var(--night);
}

/* --------------------------------------------------------------------------
   Πώς δουλεύουμε
   -------------------------------------------------------------------------- */

.tmy-steps {
  padding: clamp(80px, 12vh, 150px) var(--gutter);
  background: var(--paper-2);
  border-top: 1px solid var(--ink-10);
}

.tmy-steps__title {
  max-width: 24ch;
  margin: 20px 0 clamp(36px, 6vh, 68px);
}

.tmy-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.tmy-steps__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 230px;
  padding: clamp(24px, 2.6vw, 38px);
  background: var(--paper);
  border: 1px solid var(--ink-14);
  transition: border-color var(--dur) ease, transform var(--dur) var(--ease);
}

.tmy-steps__card:hover {
  border-color: var(--ink-40);
  transform: translateY(-4px);
}

.tmy-steps__mark {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--tone, var(--acc));
}

.tmy-steps__text {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 1.4;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Η φιλοσοφία μας
   -------------------------------------------------------------------------- */

.tmy-philo {
  padding: clamp(70px, 11vh, 140px) var(--gutter);
  border-top: 1px solid var(--ink-10);
}

.tmy-philo__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-xl);
  align-items: start;
  margin-bottom: clamp(36px, 6vh, 68px);
}

.tmy-philo__title {
  max-width: 18ch;
}

.tmy-philo__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 64ch;
}

.tmy-philo__p {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink-72);
  text-wrap: pretty;
}

.tmy-philo__p--lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}

.tmy-philo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.tmy-philo__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 150px;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--ink-14);
  border-top: 3px solid var(--tone, var(--acc));
  transition: border-color var(--dur) ease, transform var(--dur) var(--ease);
}

.tmy-philo__card:hover {
  transform: translateY(-4px);
}

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

.tmy-philo__card-text {
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: var(--fw-light);
  line-height: 1.45;
  text-wrap: pretty;
}

.tmy-philo__closing {
  max-width: 60ch;
  margin-top: clamp(32px, 5vh, 56px);
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Η δήλωση

   A statement held on screen while the section scrolls past it: the photo
   drifts, the label appears and the line rises into place (pages.js). Without
   JavaScript it is simply a full screen of type over a photo.
   -------------------------------------------------------------------------- */

.tmy-statement {
  position: relative;
  height: 190vh;
  background: var(--ink);
}

.tmy-statement__stage {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.tmy-statement__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
  transform: scale(1.12);
  will-change: transform;
}

.tmy-statement__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, .8) 0%, rgba(11, 11, 12, .6) 50%, rgba(11, 11, 12, .9) 100%);
}

.tmy-statement__body {
  position: relative;
  width: 100%;
  padding: 0 var(--gutter);
  color: var(--paper);
}

.tmy-statement__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(20px, 3vh, 36px);
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--paper-72);
}

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

.tmy-statement__line {
  max-width: 30ch;
  font-size: clamp(30px, 5vw, 80px);
  font-weight: var(--fw-thin);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .tmy-about2__aside {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmy-steps__card,
  .tmy-philo__card,
  .tmy-typo__card {
    transition: none;
  }

  .tmy-steps__card:hover,
  .tmy-philo__card:hover {
    transform: none;
  }
}
/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
      /* The lightbox still swaps, it just does not slide or fade. */
  .tmy-lightbox img {
    transition: none !important;
  }

  .tmy-lightbox img.is-swapping {
    opacity: 1;
  }

  .tmy-lightbox img.is-left,
  .tmy-lightbox img.is-right {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .tmy-article__side,
  .tmy-doc__toc,
  .tmy-story__stat {
    position: static;
  }

  .tmy-doc {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  :root {
    --tmy-hero-h: 58vh;
  }

  .single-post {
    --tmy-hero-h: 54vh;
  }
}

@media (max-width: 1000px) {
  /* Only the inline contact form — the modal's panel is narrow already, and
     its own collapse point lives in base.css. */
  .tmy-contactpage .tmy-form__row {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* The filter pills give way to the select, and the grid takes the width. */
  .tmy-index {
    display: block;
    padding-top: 40px;
  }

  .tmy-pills {
    display: none;
  }

  .tmy-index__select {
    display: block;
  }
}

@media (max-width: 700px) {
  .tmy-details,
  .tmy-videos__grid {
    grid-template-columns: 1fr;
  }

  .tmy-next {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  :root {
    --tmy-hero-h: 46vh;
  }

  .single-post {
    --tmy-hero-h: 42vh;
  }
}

/* --------------------------------------------------------------------------
   Section menu (project and property pages)

   Sits directly under the featured image and sticks below the header while
   the page scrolls. Its top follows the header: pages.js moves it up when the
   header slides away, so the two never overlap or leave a gap.
   -------------------------------------------------------------------------- */

/* The band runs the full width; the links inside it line up with the facts
   and the description, so the page reads on one left edge. */
.tmy-subnav {
  --tmy-subnav-top: 0px;
  position: sticky;
  top: var(--tmy-subnav-top);
  z-index: 20;
  padding: 0 var(--gutter);
  background: rgba(247, 247, 245, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-14);
  transition: top .55s var(--ease);
}

.tmy-subnav__list {
  display: flex;
  gap: clamp(22px, 3vw, 44px);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.tmy-subnav__list::-webkit-scrollbar {
  display: none;
}

.tmy-subnav__link {
  position: relative;
  display: block;
  padding: 20px 0 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-62);
  transition: color .3s;
}

.tmy-subnav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.tmy-subnav__link:hover,
.tmy-subnav__link:focus-visible,
.tmy-subnav__link.is-active {
  color: var(--ink);
}

.tmy-subnav__link.is-active::after {
  transform: scaleX(1);
}

/* Anchored sections stop clear of the header and the menu itself. */
.tmy-subnav ~ #perigrafi,
.tmy-subnav ~ * #schedia,
.tmy-subnav ~ #video,
.tmy-subnav ~ #topothesia,
.tmy-subnav ~ #fotografies {
  scroll-margin-top: var(--tmy-subnav-offset, 140px);
}

@media (max-width: 700px) {
  .tmy-subnav__link {
    padding: 16px 0 14px;
    font-size: 11.5px;
  }
}

/* --------------------------------------------------------------------------
   Filtered properties view (?ergo=)

   The way back out of a project-filtered list: to the project itself, or to
   every property.
   -------------------------------------------------------------------------- */

.tmy-filternote {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 30px;
  padding: 0 var(--gutter) 28px;
}

.tmy-filternote__link {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acct);
  transition: color .3s;
}

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

/* ==========================================================================
   Project and property pages — the design's layout

   Hero, then the facts band, then the description with its figures beside it.
   These rules come after the older single styles above and replace them; what
   is left up there still serves the blog post and the About page until those
   are redesigned.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Facts — the dark band under the hero
   -------------------------------------------------------------------------- */

.tmy-facts {
  padding: clamp(28px, 4vh, 48px) var(--gutter);
  background: var(--ink);
  color: var(--paper);
}

.tmy-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
}

.tmy-facts__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tmy-facts__label {
  font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--paper-50);
}

.tmy-facts__value {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
}

/* --------------------------------------------------------------------------
   Description
   -------------------------------------------------------------------------- */

.tmy-sbody {
  padding: clamp(60px, 9vh, 120px) var(--gutter);
  background: var(--paper);
}

.tmy-sbody__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-xl);
  align-items: start;
}

.tmy-sbody__aside {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.tmy-sbody__lead {
  max-width: 20ch;
}

.tmy-sbody__main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 68ch;
}

/* The figures beside the description: built area, plot, rooms. */
.tmy-sstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  width: 100%;
  max-width: 420px;
  background: var(--ink-12);
  border: 1px solid var(--ink-12);
}

.tmy-sstats__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2vw, 26px);
  background: var(--paper);
}

.tmy-sstats__value {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: var(--fw-thin);
  line-height: 1.1;
  letter-spacing: var(--ls-heading);
}

.tmy-sstats__label {
  font-size: var(--fs-label-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-62);
}

/* The remaining property specifications, under the figures. */
.tmy-specs {
  width: 100%;
  max-width: 420px;
  font-size: 15px;
}

.tmy-specs__extras {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-12);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--ink-68);
}

.tmy-specs__extras li::before {
  content: '— ';
  color: var(--ink-40);
}

.tmy-sbody__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.tmy-gallery {
  padding: clamp(60px, 9vh, 120px) var(--gutter);
  background: var(--paper-2);
  border-top: 1px solid var(--ink-10);
}

.tmy-gallery__hint {
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-62);
}

/*
 * A site gallery mixes portrait, landscape and square photographs, so the rows
 * are justified rather than ruled: they read left to right, fill the width,
 * and every photograph keeps its own shape.
 *
 * Both the basis and the growth of an item are proportional to its aspect
 * ratio (--ar, written by the template from the file's own dimensions). The
 * widths in a row therefore stay in proportion to the ratios, which means the
 * heights come out equal — no cropping, and no script to measure anything.
 */
.tmy-gallery__grid {
  --tmy-gallery-gap: clamp(12px, 1.6vw, 20px);
  --tmy-gallery-row: 260px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tmy-gallery-gap);
}

.tmy-gallery__item {
  flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * var(--tmy-gallery-row));
  /* A last row of one or two grows only so far, instead of towering over
     the rows above it. */
  max-width: calc(var(--ar, 1.5) * var(--tmy-gallery-row) * 1.7);
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--paper-2);
  border: 0;
  cursor: zoom-in;
}

.tmy-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease);
}

.tmy-gallery__item:hover img {
  transform: scale(1.05);
}

/* The row heights sit here, after the rule they narrow: they carry the same
   weight, so a media query earlier in the file would lose to it. */
@media (max-width: 1100px) {
  .tmy-gallery__grid {
    --tmy-gallery-row: 200px;
  }
}

@media (max-width: 700px) {
  /* One photograph per row; anything less is too small to read on a phone. */
  .tmy-gallery__item {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Next entry
   -------------------------------------------------------------------------- */

.tmy-nextwrap {
  padding: clamp(50px, 8vh, 100px) var(--gutter);
  border-top: 1px solid var(--ink-10);
}

.tmy-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  max-width: var(--container);
  margin: 0 auto;
}

.tmy-next > span {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.tmy-next__title {
  font-size: clamp(19px, 2vw, 28px);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
}

.tmy-next__all {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-25);
  font-size: 15px;
  font-weight: var(--fw-medium);
}

.tmy-next:hover .tmy-next__all {
  border-bottom-color: var(--acc);
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.tmy-cta {
  padding: clamp(56px, 9vh, 110px) var(--gutter);
  background: var(--ink);
  color: var(--paper);
}

.tmy-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-lg);
  align-items: end;
}

.tmy-cta__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-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   The way out of a project-filtered property list (?ergo=)
   -------------------------------------------------------------------------- */

.tmy-filternote {
  padding: clamp(20px, 3vh, 34px) var(--gutter);
  border-bottom: 1px solid var(--ink-10);
}

.tmy-filternote__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-md);
}

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

.tmy-filternote__link:hover {
  color: var(--ink);
}

@media (max-width: 860px) {
  .tmy-sbody__aside {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmy-card,
  .tmy-card__img,
  .tmy-gallery__item img {
    transition: none;
  }

  .tmy-card:hover {
    transform: none;
  }

  .tmy-card:hover .tmy-card__img,
  .tmy-gallery__item:hover img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Plans, videos and map

   These sections used to sit inside the overlay wrapper, which supplied their
   padding and width; now each holds its own.
   -------------------------------------------------------------------------- */

.tmy-plans,
.tmy-videos,
.tmy-map {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(50px, 8vh, 100px) var(--gutter) 0;
}

/* The description ends on the plans, so they follow it without a second gap. */
.tmy-sbody .tmy-plans {
  padding: 0;
}

.tmy-videos + .tmy-map,
.tmy-plans + .tmy-videos {
  padding-top: clamp(40px, 6vh, 80px);
}

/* ==========================================================================
   Blog, services, contact and the utility pages (Phase 7b)

   These rules come after the older static-page styles above and replace them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page band — the compact heading for pages the design has no hero for
   -------------------------------------------------------------------------- */

.tmy-band {
  padding: calc(var(--header-h) + clamp(40px, 7vh, 90px)) var(--gutter) clamp(28px, 5vh, 56px);
  border-bottom: 1px solid var(--ink-10);
}

.tmy-band__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-band__lead {
  max-width: var(--measure);
  margin-top: 20px;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink-72);
  text-wrap: pretty;
}

.tmy-band__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 24px;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-62);
}

/* The plain page and legal-document bodies share the container. */
.tmy-pagebody,
.tmy-doc {
  max-width: var(--container);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Services page
   -------------------------------------------------------------------------- */

.tmy-svcindex {
  padding: clamp(50px, 8vh, 100px) var(--gutter) 0;
}

.tmy-svcindex__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.tmy-svcindex__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--ink-14);
  border-top: 3px solid var(--tone, var(--acc));
  font-size: 16px;
  font-weight: var(--fw-light);
  transition: border-color var(--dur-fast) ease, transform var(--dur) var(--ease);
}

.tmy-svcindex__link:hover {
  border-color: var(--ink-40);
  /* The shorthand above would take the coloured edge with it. */
  border-top-color: var(--tone, var(--acc));
  color: var(--ink);
  transform: translateY(-3px);
}

.tmy-svcindex__mark {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--tone, var(--acc));
}

.tmy-svcs {
  padding: clamp(30px, 5vh, 60px) var(--gutter) clamp(60px, 9vh, 120px);
}

.tmy-svcs__list {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 36px);
}

/* Each service is a boxed row; every other one puts its photo on the right. */
.tmy-svcrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--paper);
  border: 1px solid var(--ink-14);
  transition: border-color var(--dur) ease;
}

.tmy-svcrow:hover {
  border-color: var(--ink-40);
}

.tmy-svcrow--flip .tmy-svcrow__text {
  order: 1;
}

.tmy-svcrow--flip .tmy-svcrow__media {
  order: 2;
}

.tmy-svcrow__media {
  overflow: hidden;
  border-left: 6px solid var(--tone, var(--acc));
}

.tmy-svcrow__media--empty {
  min-height: clamp(220px, 34vw, 420px);
  background: repeating-linear-gradient(to top, var(--ink-10) 0 1px, transparent 1px 34px), var(--paper-2);
}

.tmy-svcrow__img {
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 30vw, 420px);
  object-fit: cover;
}

.tmy-svcrow__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: clamp(26px, 3.2vw, 52px);
}

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

.tmy-svcrow__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: pretty;
}

/* The opening line takes the service's colour, in the version dark enough
   to read as text on paper. */
.tmy-svcrow__lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--tone-text, var(--acct));
  text-wrap: pretty;
}

.tmy-svcrow__p {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink-72);
  text-wrap: pretty;
}

.tmy-svcrow__cta {
  margin-top: 10px;
}

/* The featured service — «Αντιπαροχές» in the design — gets its own band. */
.tmy-svcfeat {
  --label-color: var(--paper-55);
  padding: clamp(70px, 11vh, 140px) var(--gutter);
  background: var(--ink);
  color: var(--paper);
}

.tmy-svcfeat__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--paper-72);
}

.tmy-svcfeat__mark {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--tone, var(--acc));
}

.tmy-svcfeat__title {
  max-width: 20ch;
  margin-bottom: clamp(32px, 5vh, 56px);
}

.tmy-svcfeat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-xl);
  align-items: start;
}

.tmy-svcfeat__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 60ch;
}

.tmy-svcfeat__p {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--paper-72);
  text-wrap: pretty;
}

.tmy-svcfeat__media--empty {
  min-height: clamp(260px, 40vh, 480px);
  background: repeating-linear-gradient(to top, var(--paper-12) 0 1px, transparent 1px 34px), var(--night);
}

.tmy-svcfeat__img {
  width: 100%;
  height: clamp(260px, 40vh, 480px);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Blog index — the latest article, shown large
   -------------------------------------------------------------------------- */

.tmy-lead-post {
  padding: clamp(60px, 9vh, 120px) var(--gutter) 0;
}

.tmy-feat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  border: 1px solid var(--ink-14);
  transition: border-color var(--dur) ease;
}

.tmy-feat:hover {
  border-color: var(--ink-40);
  color: var(--ink);
}

.tmy-feat__media {
  overflow: hidden;
  border-left: 6px solid var(--tone, var(--acc));
}

.tmy-feat__media--empty {
  min-height: clamp(240px, 32vw, 380px);
  background: repeating-linear-gradient(to top, var(--ink-10) 0 1px, transparent 1px 34px), var(--paper-2);
}

.tmy-feat__img {
  width: 100%;
  height: 100%;
  min-height: clamp(240px, 32vw, 380px);
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.tmy-feat:hover .tmy-feat__img {
  transform: scale(1.04);
}

.tmy-feat__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 3vw, 48px);
}

.tmy-feat__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-62);
}

.tmy-feat__title {
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: var(--fw-light);
  line-height: 1.16;
  letter-spacing: var(--ls-heading);
  text-wrap: pretty;
}

.tmy-feat__text {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--ink-68);
  text-wrap: pretty;
}

.tmy-feat__more {
  margin-top: auto;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--acct);
}

/* --------------------------------------------------------------------------
   Post — the contents column beside the article
   -------------------------------------------------------------------------- */

.tmy-article {
  padding: clamp(56px, 9vh, 110px) var(--gutter);
}

.tmy-article__grid {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: var(--gap-xl);
  align-items: start;
}

.tmy-article__side {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tmy-article__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

.tmy-article__back:hover {
  color: var(--ink);
}

.tmy-article__body {
  max-width: 68ch;
}

.tmy-related {
  padding: clamp(56px, 9vh, 110px) var(--gutter);
  background: var(--paper-2);
  border-top: 1px solid var(--ink-10);
}

.tmy-related__grid {
  margin-top: clamp(24px, 4vh, 40px);
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.tmy-cintro {
  padding: clamp(70px, 11vh, 140px) var(--gutter);
}

.tmy-cintro__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-xl);
  align-items: start;
}

.tmy-cintro__title {
  max-width: 18ch;
  margin-bottom: 24px;
}

.tmy-cintro__lead {
  max-width: var(--measure);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink-72);
  text-wrap: pretty;
}

.tmy-cintro__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--ink-14);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-62);
}

.tmy-cintro__brand span:first-child {
  font-size: var(--fs-body-lg);
  letter-spacing: var(--ls-tight);
  text-transform: none;
  color: var(--ink);
}

.tmy-cdetails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.tmy-cdetail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--ink-14);
  border-top: 3px solid var(--tone, var(--acc));
}

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

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

.tmy-cdetail__value {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.5;
}

.tmy-cform {
  padding: clamp(70px, 11vh, 140px) var(--gutter);
  background: var(--paper-2);
  border-top: 1px solid var(--ink-10);
}

/* The map closes the band edge to edge, so the section carries no gutter and
   no bottom padding of its own; the heading above it keeps them. */
.tmy-office {
  --label-color: var(--paper-55);
  --line-color: var(--paper-30);
  --link-hover: var(--acc);
  padding: clamp(60px, 9vh, 110px) 0 0;
  background: var(--ink);
  color: var(--paper);
}

.tmy-office > .tmy-wrap {
  padding: 0 var(--gutter);
}

.tmy-office__title {
  max-width: 20ch;
}

/*
 * Edge to edge under the band, a fixed band of height rather than a ratio, as
 * in the design. It must stay positioned: the click-to-load button covers it
 * with inset: 0, and without this it would fall back to the top of the page.
 */
.tmy-office__map {
  position: relative;
  height: clamp(320px, 56vh, 620px);
  margin-top: clamp(40px, 6vh, 72px);
  overflow: hidden;
  border-top: 1px solid var(--paper-14);
  background: var(--night);
}

.tmy-office__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* The shared button is written for a light frame; here it sits on the night. */
.tmy-office__map .tmy-map__load {
  color: var(--paper);
}

.tmy-office__map .tmy-map__load small {
  color: var(--paper-55);
}

.tmy-office__map .tmy-map__load:hover {
  background: rgba(247, 247, 245, .08);
}

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

  .tmy-article__side {
    position: static;
  }

  /* Every row keeps its photo first once they stack. */
  .tmy-svcrow--flip .tmy-svcrow__media {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmy-feat,
  .tmy-feat__img,
  .tmy-svcindex__link {
    transition: none;
  }

  .tmy-feat:hover .tmy-feat__img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Contact page — the form beside its heading, the map edge to edge
   -------------------------------------------------------------------------- */

.tmy-cform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-xl);
  align-items: start;
}

.tmy-cform__aside {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
}

.tmy-cform__title {
  max-width: 16ch;
  margin-bottom: 20px;
}

.tmy-cform__lead {
  max-width: 40ch;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink-72);
  text-wrap: pretty;
}

/* The heading beside it is the section's title, so the form needs none. */
.tmy-cform .tmy-form {
  max-width: none;
}

@media (max-width: 1000px) {
  /* The inline form's two-column rows stack well before the modal's do. */
  .tmy-cform .tmy-form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}

@media (max-width: 860px) {
  .tmy-cform__aside {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Specification list

   tmy_meta_list() prints a <dl> of label/value rows. It serves the property
   page's remaining specifications, under the figures.
   -------------------------------------------------------------------------- */

.tmy-meta__dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ink-12);
}

.tmy-meta__dl > div:last-child {
  border-bottom: 0;
}

.tmy-meta__dl dt {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-62);
}

.tmy-meta__dl dd {
  margin: 0;
  font-weight: var(--fw-light);
  text-align: right;
}