/* ==========================================================================
   landing.css — the public tiscan.ie front door ONLY.
   Loaded after portal.css by templates/landing.html and by nothing else.

   Everything the landing page can borrow, it borrows: .site-header, .brand,
   .tiscan-wordmark, .header-link, .gallery-hero, .kicker, .lede, .button.*,
   .projects, .section-heading, .project-grid, .project-card, .accent-*,
   .pending-visual, .card-body, .card-title-row, .content-panel, .section-intro,
   .viewer-feature*, .error-panel, .site-footer all come from portal.css
   unchanged. The rules below are only the patterns that do not exist there.

   Colours are the portal tokens (--orange, --ink, --muted, --line, --black,
   --paper, --white). No new hex values are introduced.

   Two breakpoints only — 900px and 620px — matching portal.css. No third.

   COLOUR SCHEME: portal.css declares no prefers-color-scheme block and no
   color-scheme property; the portal is a single committed light theme with
   black chrome. This page matches it deliberately. Dark mode is a whole-portal
   change, not a marketing-page-only one.
   ========================================================================== */

/* --- Keyboard access ------------------------------------------------------
   portal.css ships no focus styling at all beyond .drawing-tools inputs, so
   a keyboard user currently gets only the UA default (invisible on the black
   header). These rules are scoped to .landing so nothing else changes. */

.landing .skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 60;
  padding: 11px 16px;
  border-radius: 3px;
  color: var(--white);
  background: var(--orange);
  font-size: 12px;
  font-weight: 780;
  text-decoration: none;
  transition: top .15s ease;
}
.landing .skip-link:focus { top: 8px; }

.landing a:focus-visible,
.landing .button:focus-visible,
.landing .skip-link:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}
.landing main:focus { outline: none; }

/* --- Page rhythm ----------------------------------------------------------
   Mirrors .job-content: one column, 24px between panels, generous tail. */

.landing-sections {
  padding: 62px 0 96px;
  display: grid;
  gap: 40px;
}
.landing .projects { padding-bottom: 0; }

/* --- Hero action pair -----------------------------------------------------
   .gallery-hero-inner is a space-between flex row and .gallery-hero .button
   is flex:0 0 auto, so two buttons need one flex item to sit in. */

.landing-hero-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
/* .button.secondary takes `color: inherit`, and inside .gallery-hero that
   inherits white — white label on a white button. Pin it to the ink token. */
.landing .gallery-hero .button.secondary { color: var(--ink); }

/* --- Deliverable cards ----------------------------------------------------
   Same .project-card component as the portal, but these four are <article>,
   not links. Kill the lift-on-hover so the page does not promise a click it
   does not deliver, and give the image-free .pending-visual a height that
   suits a marketing grid rather than a four-thumbnail job card. */

.landing .project-card.is-static:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(45, 40, 67, .04);
}
.landing .card-visual { height: 168px; }
.landing .card-title-row h3 { margin: 0; }

/* --- Three-across step / argument grid ------------------------------------
   Used twice: the numbered "How it runs" steps and the three fitout
   arguments. <ol> in the first case, <div> in the second. */

.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-step { min-width: 0; }
.landing-step + .landing-step { border-left: 1px solid var(--line); padding-left: 28px; }
.landing-step-number {
  margin: 0 0 8px;
  /* --orange on white is 2.78:1. --orange-ink is 5.02:1. */
  color: var(--orange-ink);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .12em;
}
.landing-step h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.03em;
}
.landing-step .section-intro {
  max-width: none;
  margin: 10px 0 0;
}

/* --- Delivery-portal panel ------------------------------------------------
   .viewer-feature-window normally frames an <img> at a fixed height. Here it
   frames the image-free .pending-visual instead — no client drawing on a
   public page — so that placeholder needs the height the <img> had. */

.landing .viewer-feature-window .pending-visual {
  height: 190px;
  border: 1px solid #ece9e5;
  border-radius: 0;
  background: var(--white);
}
.landing .viewer-feature-copy h2 { letter-spacing: -.05em; }

/* --- Contact panel --------------------------------------------------------
   .error-panel carries its own 70/100px margins for a standalone error page;
   inside the .landing-sections grid the gap does that job. The heading is an
   <h2> (the page has exactly one <h1>, in the hero) so it needs the display
   scale that .error-panel h1 would otherwise have given it. */

.landing-contact {
  margin: 0;
  text-align: center;
}
.landing-contact h2 {
  max-width: 820px;
  margin: 10px auto 24px;
  font-size: clamp(38px, 6vw, 68px);
  line-height: .94;
  letter-spacing: -.06em;
  font-weight: 730;
}
.landing-contact-body {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.landing-contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  margin-top: 30px;
}
.landing-contact-address {
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

/* --- Footer ---------------------------------------------------------------
   .site-footer is a two-item space-between row; the right item carries the
   company line and the portal link. */

.landing-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 20px;
  text-align: right;
}
.landing-footer-link {
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.landing-footer-link:hover { color: var(--orange); }

/* ========================================================================== */

@media (max-width: 900px) {
  .landing-sections { padding: 48px 0 72px; gap: 32px; }
  .landing-steps { grid-template-columns: 1fr; gap: 26px; }
  .landing-step + .landing-step {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 26px;
  }
  .landing-hero-actions { margin-bottom: 0; }
}

@media (max-width: 620px) {
  .landing-sections { padding: 36px 0 60px; gap: 26px; }
  .landing .card-visual { height: 150px; }
  .landing .viewer-feature-window .pending-visual { height: 142px; }
  .landing-contact { padding: 34px 20px; }
  .landing-contact h2 { line-height: 1; }
  .landing-contact-body { font-size: 15px; }
  .landing-contact-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .landing-contact-address { font-size: 14px; }
  .landing-footer-meta { justify-content: flex-start; text-align: left; }
  .landing-hero-actions .button { flex: 1 1 auto; }
}


/* The delivery panel is a <section> now, not one 350px-tall <a href="mailto:">.
   Only this arrow is the link, so the copy can be read and selected on a
   phone and a screen reader announces a four-word link instead of the whole
   paragraph. Same look as .viewer-feature-copy > span in portal.css. */
.landing .viewer-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 25px;
  min-height: 44px;
  color: white;
  font-size: 12px;
  font-weight: 780;
  text-decoration: none;
}
.landing .viewer-feature-cta b { color: var(--orange); font-size: 20px; transition: transform .2s ease; }
.landing .viewer-feature-cta:hover b { transform: translateX(4px); }
/* The panel no longer navigates as a whole, so it must not lift like a card
   that does. The window still straightens on hover. */
.landing .viewer-feature:hover { transform: none; box-shadow: none; border-color: var(--black); }

/* Footer link was a 12px-tall tap target. */
.landing-footer-link { display: inline-flex; align-items: center; min-height: 44px; }