/* Header, cab bar, menu sheet, buttons, arch + hoop, prints, captions,
   ledgers, plaque, footer, photo strip */

/* The Greenarc mark: the supplied vector, coloured with currentColor via a mask. */
.mark {
  display: block;
  aspect-ratio: 2044 / 1420;
  background-color: currentColor;
  -webkit-mask: url("../assets/brand/greenarc-mark.svg") center / contain no-repeat;
  mask: url("../assets/brand/greenarc-mark.svg") center / contain no-repeat;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.mark-arch {
  display: block;
  aspect-ratio: 1110 / 880;
  background-color: currentColor;
  -webkit-mask: url("../assets/brand/greenarc-arch.svg") center / contain no-repeat;
  mask: url("../assets/brand/greenarc-arch.svg") center / contain no-repeat;
}

/* ---------- Header ---------- */
.site-header {
  position: absolute; left: 0; right: 0; top: 0;
  z-index: 60;
  height: 60px;
  transition: background-color var(--dur-micro) linear, color var(--dur-micro) linear, transform var(--dur-ui) var(--ease-ui);
}
.site-header__bar { height: 100%; display: flex; align-items: center; gap: 28px; }
.site-header__home { color: inherit; display: block; padding: 2px 0; margin-right: auto; line-height: 0; }
.site-header__home .mark { width: 80px; }
[data-surface="stone"] .site-header__home, [data-surface="white"] .site-header__home,
.site-header[data-surface="stone"] .site-header__home, .site-header[data-surface="white"] .site-header__home { color: var(--forest); }
.site-nav, .site-header .site-header__call { display: none; }
.site-header__menu {
  min-height: 44px; min-width: 44px; padding: 0 4px; background: none; border: 0;
  font-weight: 700; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em;
}

@media (min-width: 1024px) {
  .site-header {
    position: fixed; inset: 0 0 auto 0; height: var(--header-h);
  }
  .site-header.is-hidden { transform: translateY(calc(-100% - 12px)); visibility: hidden; transition: background-color var(--dur-micro) linear, color var(--dur-micro) linear, transform var(--dur-ui) var(--ease-ui), visibility 0s linear var(--dur-ui); }
  .site-header__home .mark { width: 100px; }
  .site-header__menu { display: none; }
  .site-nav { display: block; }
  .site-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
  .site-nav a {
    position: relative; display: block; padding: 14px 0 10px;
    font-weight: 600; font-size: var(--step-0); color: inherit; text-decoration: none;
  }
  .site-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
  .nav-hoop { position: absolute; left: 50%; top: 0; width: 14px; height: 12px; margin-left: -7px; overflow: visible; display: none; }
  .nav-hoop path { fill: none; stroke: var(--hoop); stroke-width: 2px; vector-effect: non-scaling-stroke; }
  .site-nav a[aria-current="page"] .nav-hoop { display: block; }
  .site-header .site-header__call { display: inline-flex; min-height: 44px; }
}
.site-header[data-surface="photo"].is-scrolled { background-color: rgb(12 30 19 / .94); }
.site-header__call { --btn-bg: var(--lime); --btn-fg: var(--ink); --btn-fill: var(--white); --btn-fill-fg: var(--ink); }
.site-header[data-surface="lime"] .site-header__call { --btn-bg: var(--ink); --btn-fg: var(--lime); --btn-fill: var(--forest); --btn-fill-fg: var(--white); }
.site-header[data-surface="stone"] .site-header__call,
.site-header[data-surface="white"] .site-header__call { --btn-fill: var(--ink); --btn-fill-fg: var(--lime); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0.7em 1.35em;
  font-family: var(--font-text); font-weight: 600; font-size: var(--step-0); line-height: 1.15;
  text-align: center; text-decoration: none; cursor: pointer;
  border: 0; border-radius: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: color var(--dur-ui) var(--ease-ui);
}
.btn::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0;
  width: 150%; aspect-ratio: 1.22 / 1;
  border-radius: 100vmax 100vmax 0 0; background: var(--btn-fill);
  transform: translate(-50%, 101%);
  transition: transform var(--dur-ui) var(--ease-ui);
}
.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); text-decoration: none; }
.btn:hover::before, .btn:focus-visible::before { transform: translate(-50%, 0); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--lime); --btn-fill: var(--forest); --btn-fill-fg: var(--white); }
.btn--lime { --btn-bg: var(--lime); --btn-fg: var(--ink); }
.btn--big { min-height: 56px; font-size: var(--step-1); padding-inline: 1.4em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.text-link { font-weight: 600; color: var(--link); }

/* ---------- Arch windows and hoops ---------- */
.arch-frame { position: relative; }
.arch {
  position: relative; overflow: hidden;
  border-radius: 100vmax 100vmax 0 0;
  background: var(--ink);
}
.arch--logo { aspect-ratio: 1.22 / 1; }
.arch--gate { aspect-ratio: 4 / 5; }
.arch > img, .arch > video, .arch > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hoop {
  position: absolute; inset: calc(var(--hoop-gap) * -1);
  width: calc(100% + 2 * var(--hoop-gap)); height: calc(100% + 2 * var(--hoop-gap));
  max-width: none; overflow: visible; pointer-events: none;
}
.hoop path { fill: none; stroke: var(--hoop); stroke-width: 3px; vector-effect: non-scaling-stroke; }
@media (max-width: 599.98px) { .hoop path { stroke-width: 2px; } }
.arch-frame--small { --hoop-gap: 6px; }
.arch-frame--small .hoop path { stroke-width: 2px; }

/* A caption strip inside the bottom of an arch */
.arch__tag {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: rgb(18 41 27 / .8); color: var(--white); font-size: var(--step--1); max-width: none; margin: 0;
}

.video-toggle {
  position: absolute; z-index: 3; left: 16px; bottom: 16px;
  min-height: 36px; padding: 6px 14px;
  font: 600 var(--step--1)/1 var(--font-text); color: var(--white);
  background: rgb(18 41 27 / .7); border: 0; cursor: pointer;
}
.video-toggle:hover { background: rgb(18 41 27 / .9); }

/* ---------- Captions ---------- */
.caption {
  margin-top: .75rem; max-width: 62ch;
  font-size: var(--step--1); line-height: 1.45; color: var(--muted);
}
.caption strong { font-weight: 600; }
.caption a { color: inherit; }
.tag-illus { white-space: nowrap; }

/* ---------- Prints (the two real Greenarc photos) ---------- */
.print {
  position: relative; background: var(--white); color: var(--ink);
  padding: 8px; box-shadow: var(--print-shadow);
  transform: rotate(var(--tilt, -2deg));
  transition: transform var(--dur-ui) var(--ease-ui);
}
@media (min-width: 600px) { .print { padding: 10px; } }
.print img { width: 100%; height: auto; }
.print figcaption { padding: 10px 2px 2px; font-size: var(--step--1); line-height: 1.4; color: var(--ink); }
.print figcaption strong { font-weight: 600; }
.print--tape::before {
  content: ""; position: absolute; z-index: 2; top: -13px; left: 50%;
  width: 88px; height: 26px; margin-left: -44px;
  background: rgb(166 206 57 / .6); transform: rotate(-4deg);
}

/* ---------- Ledgers ---------- */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ledger > li, .ledger > div { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.spec { margin: 0; border-top: 1px solid var(--rule); }
.spec > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font-weight: 700; }
.spec dd { margin: 0; }
@media (min-width: 700px) { .spec > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* ---------- Plaque (like Gibraltar's ceramic street plaques) ---------- */
.plaque { border: 1px solid var(--rule); padding: 24px; }
.plaque address { font-style: normal; }
.placeholder {
  color: var(--bougain); text-decoration: underline dashed 1px; text-underline-offset: .22em;
}
[data-surface="forest"] .placeholder, [data-surface="ink"] .placeholder { color: var(--lime-light); }
[data-surface="bougain"] .placeholder, [data-surface="lime"] .placeholder { color: inherit; }

/* ---------- Menu sheet (mobile) ---------- */
.cab-bar {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 40fr 60fr;
  height: calc(var(--cab-h) + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--white);
  transition: transform var(--dur-ui) var(--ease-ui);
}
.cab-bar.is-away { transform: translateY(105%); }
.cab-bar__menu, .cab-bar__call {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding-bottom: env(safe-area-inset-bottom);
  font: 700 var(--step-0)/1 var(--font-text); text-decoration: none; border: 0; cursor: pointer;
}
.cab-bar__menu { background: var(--ink); color: var(--white); }
.cab-bar__call { background: var(--lime); color: var(--ink); }
.cab-bar :focus-visible { outline-color: var(--lime); outline-offset: -5px; }
.cab-bar__call:focus-visible { outline-color: var(--ink); }
@media (min-width: 1024px) { .cab-bar, .menu-sheet { display: none !important; } }

.menu-sheet {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  clip-path: inset(-50vh -30vw 0 -30vw round 100vmax 100vmax 0 0);
}
.menu-sheet[hidden] { display: none; }
.menu-sheet.is-closed { clip-path: inset(100% 50% 0 50% round 100vmax 100vmax 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .menu-sheet.is-animating { transition: clip-path 520ms var(--ease-arch); }
  .menu-sheet.is-animating.is-closed { transition-duration: 380ms; }
}
.menu-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 28px var(--margin) 24px; display: flex; flex-direction: column; }
.menu-sheet__body nav { margin-block: auto 0; }
.menu-sheet__address { margin-bottom: auto; }
.menu-sheet__arch { width: 48px; color: var(--lime); margin-bottom: 20px; }
.menu-sheet__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.menu-sheet__list li { border-bottom: 1px solid var(--rule); }
.menu-sheet__list a {
  display: flex; align-items: center; gap: 18px; padding: 12px 0; min-height: 64px;
  font: 800 var(--step-3)/1.05 var(--font-display); letter-spacing: -0.015em; color: var(--white); text-decoration: none;
}
.menu-sheet__list a[aria-current="page"] { color: var(--lime-light); }
.menu-thumb { width: 64px; flex: none; }
.menu-thumb--square { aspect-ratio: 1; overflow: hidden; }
.menu-thumb img { width: 100%; height: 100%; object-fit: cover; }
.menu-sheet__address { margin-top: 24px; font-size: var(--step-0); color: var(--on-dark-muted); font-style: normal; }
.menu-sheet__address a { color: var(--lime); font-weight: 700; }
.menu-sheet__bar { position: static; flex: none; }

/* ---------- Footer ---------- */
.footer-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) { .footer-strip { grid-template-columns: repeat(6, 1fr); } }
.footer-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.site-footer__body { padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.site-footer__mark { width: 96px; color: var(--white); margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.site-footer__call-label { font-weight: 600; font-size: var(--step-1); }
.site-footer__phone {
  display: inline-block; font: 900 var(--step-5)/0.95 var(--font-display); letter-spacing: -0.02em;
  color: var(--lime); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
  margin: 8px 0 12px;
}
.site-footer__phone:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.site-footer__intl { font-size: var(--step--1); color: var(--on-dark-muted); }
.site-footer__plaque-wrap { position: relative; margin-top: 3.5rem; padding-top: 34px; }
.site-footer__hoop { position: absolute; left: -10px; right: -10px; top: 0; height: calc(100% + 10px); width: calc(100% + 20px); max-width: none; }
.site-footer__hoop path { fill: none; stroke: var(--lime); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.site-footer__plaque { position: relative; margin-inline: clamp(22px, 3vw, 40px); font-weight: 500; font-size: var(--step-1); line-height: 1.4; }
.site-footer__maps { display: inline-block; margin-top: 14px; margin-inline: clamp(22px, 3vw, 40px); font-weight: 600; }
.site-footer__nav { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 22px; border-top: 1px solid var(--rule-dark); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.site-footer__nav a { color: var(--white); font-weight: 600; text-decoration: none; display: inline-block; padding: 8px 0; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__social a { color: var(--lime); }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 18px; font-size: var(--step--1); color: rgb(246 247 242 / .72); }
.site-footer__legal { margin: 0; max-width: none; }
.site-footer__credit { margin: 0; }
.site-footer__credit a { color: var(--white); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--lime); padding-bottom: 1px; }
.site-footer__credit a:hover { color: var(--lime); }
@media (min-width: 1024px) {
  .site-footer__call { grid-column: 1 / 8; }
  .site-footer__place { grid-column: 8 / 13; }
  .site-footer__plaque-wrap { margin-top: 0; }
}

/* ======================================================================
   Photography in the backgrounds
   ====================================================================== */

/* A veil: a photograph blended faintly into a coloured section.
   Usage: <section class="has-veil" data-surface="..."><img class="veil" ...> */
.has-veil { position: relative; isolation: isolate; }
.veil {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none;
  object-fit: cover; pointer-events: none; user-select: none;
  mix-blend-mode: var(--veil-mode, luminosity); opacity: var(--veil-o, .22);
}
[data-surface="forest"] .veil { --veil-mode: luminosity; --veil-o: .3; }
[data-surface="ink"] .veil { --veil-mode: luminosity; --veil-o: .22; }
[data-surface="stone"] .veil { --veil-mode: multiply; --veil-o: .15; }
[data-surface="white"] .veil { --veil-mode: multiply; --veil-o: .14; }
[data-surface="lime"] .veil { --veil-mode: multiply; --veil-o: .22; }
[data-surface="bougain"] .veil { --veil-mode: luminosity; --veil-o: .32; }
/* Fade a veil out towards the text side */
.veil--fade-r { -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 85%); mask-image: linear-gradient(to left, #000 20%, transparent 85%); }
.veil--fade-l { -webkit-mask-image: linear-gradient(to right, #000 20%, transparent 85%); mask-image: linear-gradient(to right, #000 20%, transparent 85%); }
.veil--fade-t { -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%); mask-image: linear-gradient(to top, #000 30%, transparent 100%); }
.veil--fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); }

/* The graded photo hero, shared by every page.
   A full-bleed photograph, graded into the brand green, with the arch as the focus. */
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--white);
  padding-top: 76px; padding-bottom: 2.75rem;
}
.phero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.phero__bg > img, .phero__bg > video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
/* Grade: the photograph takes the forest hue, then darkens towards the text. */
.phero__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--phero-tint, #2B5E3A); mix-blend-mode: color; opacity: var(--phero-tint-o, .62);
}
.phero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgb(10 26 16 / .55) 0%, rgb(10 26 16 / .0) 22%),
    linear-gradient(to top, rgb(10 26 16 / .88) 0%, rgb(10 26 16 / .55) 45%, rgb(10 26 16 / .35) 100%);
}
.phero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
.phero__copy { max-width: 36rem; min-width: 0; }
.phero h1 {
  color: var(--white); font-weight: 900;
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 3.4rem); line-height: .98; letter-spacing: -0.02em;
}
.phero__sub { margin-top: 1rem; max-width: 34ch; font-size: var(--step-1); line-height: 1.4; color: rgb(246 247 242 / .92); }
.phero .actions { margin-top: 1.5rem; }
.phero .text-link { color: var(--white); }
.phero__fig { margin: 0; justify-self: center; width: min(78vw, 360px); }
.phero__fig .arch-frame { margin: var(--hoop-gap); }
.phero__fig .arch { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.phero__meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 1.4rem;
  font-size: var(--step--1); font-weight: 600; color: rgb(246 247 242 / .8);
}
.phero__meta a { color: inherit; }
@media (max-width: 1023.98px) {
  .phero { min-height: calc(100svh - var(--cab-h)); display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .phero h1 { font-size: clamp(3rem, 1rem + 6vw, 4.4rem); }
  .phero__fig { width: min(52vw, 400px); }
}
@media (min-width: 1024px) {
  .phero {
    --fig-w: min(34vw, calc((100svh - 190px) * .8), 560px);
    min-height: max(600px, 100vh); min-height: max(600px, 100svh);
    display: flex; align-items: center;
    padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 3rem;
  }
  .phero__inner { width: 100%; grid-template-columns: minmax(0, 1fr) var(--fig-w); column-gap: clamp(2rem, 6vw, 7rem); align-items: center; }
  .phero__copy { max-width: 48rem; }
  .phero h1 { font-size: min(clamp(3rem, 1rem + 4.2vw, 5.8rem), 13.5vh); }
  .phero__sub { max-width: 38ch; }
  .phero__fig { width: 100%; justify-self: end; }
  .phero__fig .arch-frame { margin: var(--hoop-gap); }
}

/* ---------- Footer: a faint photograph behind, a plaque for the address ---------- */
.site-footer__body { position: relative; isolation: isolate; overflow: hidden; }
.site-footer__body > .veil { --veil-o: .2; object-position: 50% 30%; }
.site-footer__plaque-wrap { padding-top: 0; }
.site-footer__hoop { display: none; }
.site-footer__plaque {
  display: inline-block; margin: 0; padding: 22px 28px 22px 26px;
  background: var(--white); color: var(--ink);
  border: 0; outline: 2px solid var(--white); outline-offset: 5px;
  box-shadow: inset 0 0 0 2px var(--forest), inset 0 0 0 5px var(--white), inset 0 0 0 6px var(--forest);
  font: 800 var(--step-1)/1.3 var(--font-display); letter-spacing: -0.005em;
}
.site-footer__plaque .mark-arch { width: 34px; color: var(--forest); margin-bottom: 10px; }
.site-footer__maps { display: block; margin: 16px 0 0; }
@media (min-width: 1024px) {
  .site-footer__place { display: flex; justify-content: flex-end; align-items: flex-end; }
}