/* ==========================================================================
   07 — MASTER (Exact Design 3 CAD Blueprint + Large Hero Images + Brand Accents)
   ========================================================================== */

:root {
  --green: #2ba579;
  --lime: #c7c83a;
  --pink: #ef416b;
  --sky: #b6e1df;
  --sky-dark: #27817e;
  --lime-dark: #8e8f17;
  --ink: #000000;
  --ink-70: rgba(0,0,0,.70);
  --ink-45: rgba(0,0,0,.45);
  --paper: #f5f6f3;
  --paper-2: #eceee9;
  --rule: rgba(0,0,0,.16);
  --hair: rgba(0,0,0,.08);
  --gutter: 48px;
  --maxw: 1600px;
  --rail: 288px;
  --font: 'Sansation', system-ui, sans-serif;
  --disp: 'Tomorrow', system-ui, sans-serif;
}

body {
  font-family: var(--font); font-weight: 300; font-size: clamp(.97rem,.95rem + .12vw,1.02rem);
  line-height: 1.7; color: var(--ink); background: var(--paper);
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 48px 48px;
}
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Scrollbar ---------- */
html { scrollbar-width: thin; scrollbar-color: var(--green) var(--paper); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); border-left: 1px solid var(--rule); }
::-webkit-scrollbar-thumb { background: var(--green); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

/* ---------- Typography ---------- */
.eyebrow { font-family: var(--disp); font-size: .64rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--green); }
.eyebrow--lime { color: var(--lime-dark); }
.eyebrow--sky { color: var(--sky-dark); }
.eyebrow--pink { color: var(--pink); }

.page-title, .statement, .sec-title, .hero__huge, .card__title, .foot-cta__title,
.service__head h3, .sent h2, .faq summary {
  font-family: var(--disp); font-weight: 500; line-height: 1.06; letter-spacing: -.025em;
}
.page-title { font-size: clamp(2.5rem, 6.5vw, 5rem); margin-top: 1rem; }
.statement { font-size: clamp(1.7rem, 3.6vw, 2.9rem); max-width: 24ch; margin-top: 1rem; line-height: 1.15; }
.sec-title { font-size: clamp(1.4rem, 2.8vw, 2.2rem); margin-top: .5rem; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-70); max-width: 52ch; margin-top: 1.2rem; }
.prose { color: var(--ink-70); max-width: 64ch; }
.prose p + p { margin-top: 1.1em; }

/* ---------- Buttons & Action Links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .65em; padding: .9em 1.8em;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font-family: var(--disp); font-size: .7rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer; transition: .25s; text-decoration: none;
}
.btn:hover { background: var(--green); border-color: var(--green); color: #fff; }

.btn--green {
  background: var(--green); color: #ffffff; border: 1px solid var(--green);
}
.btn--green:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; }

.btn--lime {
  background: var(--lime); color: var(--ink); border: 1px solid var(--lime);
  font-weight: 700;
}
.btn--lime:hover { background: var(--green); border-color: var(--green); color: #ffffff; }

.arrow { display: inline-flex; align-items: center; gap: .55em; font-family: var(--disp); font-size: .66rem;
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;  padding-bottom: .3em; transition: color .2s, border-color .2s, gap .25s; }
.arrow:hover { color: var(--green); border-color: var(--green); gap: .8em; }

/* ---------- Left Rail Navigation (Design 3 Style) ---------- */
.site-header {  background: var(--paper); position: sticky; top: 0; z-index: 100;  border-bottom: 1px solid var(--rule); }
.site-header__in { padding-block: 1rem; }
.brand img { height: 44px !important; width: auto; }
.site-nav a { font-family: var(--disp); font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-70); transition: color .2s, padding-left .25s; }
.site-nav ul a:hover, .site-nav ul a[aria-current] { color: var(--green); }
.nav-cta { border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: .7em 1.2em; font-family: var(--disp); font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; transition: .3s; }
.nav-cta:hover { background: var(--green); border-color: var(--green); color: #fff; }

@media (min-width: 1100px) {
  .site-header { position: fixed; inset: 0 auto 0 0; width: var(--rail); border-right: 1px solid var(--rule); border-bottom: 0;  border-bottom: 1px solid var(--rule); }
  .site-header__in { padding: 2.5rem 1.8rem; max-width: none; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
  .site-nav { margin-top: 2.5rem; width: 100%; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 1.3rem; width: 100%; }
  .site-nav ul li { width: 100%; }
  .site-nav ul a { display: block; padding-block: .25rem; }
  .site-nav ul a:hover, .site-nav ul a[aria-current] { padding-left: 6px; }
  main, .site-footer { margin-left: var(--rail); }
  .nav-cta { margin-top: auto; width: 100%; text-align: center; }
}


/* ---------- Hero: Clean Design 3 with BIG Landing Photography ---------- */
.hero--master {  position: relative; }
.hero--master .hero__in { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: 2rem; }
.hero__strap { font-family: var(--disp); font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--green); margin-bottom: 1.2rem; }
.hero__huge { font-size: clamp(2.8rem, 6.8vw, 5.8rem); line-height: 1.04; margin-bottom: 1.5rem; }
.hero__huge em { font-style: normal; color: var(--green); }
.hero__row { margin-top: 2.2rem; padding-top: 1.6rem;  display: flex; align-items: center; justify-content: space-between; }
.hero__marks { display: flex; gap: .5rem; }
.hero__marks .mark { width: 28px; height: 28px; color: var(--green); }

/* Large Landing Cover Image — CSS Grid stack so logo sits on photo */
.hero__cover {
  display: grid;
  
  background: #000;
}
.hero__cover > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
  filter: grayscale(.08) contrast(1.03) brightness(.78);
}
.hero__cover-overlay {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Centred logo */
.hero__cover-logo {
  text-align: center;
  pointer-events: auto;
}
.hero__cover-logo img {
  width: clamp(220px, 36vw, 480px);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 24px rgba(0,0,0,.45));
}

/* Hero registration marks */
.hero__reg {
  position: absolute;
  width: 38px;
  height: 38px;
  color: #fff;
  opacity: 1;
}
.hero__reg svg { width: 100%; height: 100%; display: block; }

/* L corners — rotated to face inward */
.hero__reg--tl { top: 20px;  left: 20px; }
.hero__reg--tr { top: 20px;  right: 20px; transform: scaleX(-1); }
.hero__reg--bl { bottom: 20px; left: 20px; transform: scaleY(-1); }
.hero__reg--br { bottom: 20px; right: 20px; transform: rotate(180deg); }

/* + edge midpoints */
.hero__reg--tc { top: 20px;    left: 50%; transform: translateX(-50%); }
.hero__reg--bc { bottom: 20px; left: 50%; transform: translateX(-50%); }
.hero__reg--lc { left: 20px;   top: 50%;  transform: translateY(-50%); }
.hero__reg--rc { right: 20px;  top: 50%;  transform: translateY(-50%); }

@media (max-width: 860px) {
  .hero__cover > img { height: 75vh; }
  .hero__reg { width: 24px; height: 24px; }
  .hero__reg--tl { top: 12px; left: 12px; }
  .hero__reg--tr { top: 12px; right: 12px; transform: scaleX(-1); }
  .hero__reg--bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
  .hero__reg--br { bottom: 12px; right: 12px; transform: rotate(180deg); }
  .hero__reg--tc { top: 12px; left: 50%; transform: translateX(-50%); }
  .hero__reg--bc { bottom: 12px; left: 50%; transform: translateX(-50%); }
  .hero__reg--lc { left: 12px; top: 50%; transform: translateY(-50%); }
  .hero__reg--rc { right: 12px; top: 50%; transform: translateY(-50%); }
}

/* ---------- Sections ---------- */
.sec { }
.sec-head { padding-bottom: 1.4rem;  margin-bottom: 2.4rem; display: flex; justify-content: space-between; align-items: flex-end; }
.page-head { }
.sec--approach { }

.filters {  background: var(--paper); position: sticky; top: var(--head-h); z-index: 50;  border-bottom: 1px solid var(--rule); }
@media (min-width: 1100px) { .filters { top: 0;  border-bottom: 1px solid var(--rule); } }
.filters ul { padding-block: .85rem; }
.filters button { font-family: var(--disp); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-45); transition: color .2s; }
.filters button.is-active { color: var(--green); border-bottom: 2px solid var(--green); padding-bottom: calc(.5em - 2px); }
.filters button:hover { color: var(--green); }

/* ---------- Cards: Drawing Sheets ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: start;
}

.card { border: 1px solid var(--rule); background: #fff; position: relative; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; overflow: hidden; }
.card:hover { border-color: var(--green); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(43,165,121,.12), 0 4px 12px rgba(0,0,0,.05); }
.card::before, .card::after {
  content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--green); z-index: 2; transition: width .3s, height .3s; opacity: .5;
}
.card::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.card::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.card:hover::before, .card:hover::after { width: 16px; height: 16px; opacity: 1; }
.card__media { aspect-ratio: 4/3; overflow: hidden; position: relative; border-bottom: 1px solid var(--hair); }
.card__media img { filter: grayscale(.08) contrast(1.02); transition: filter .5s ease, transform .5s ease; width: 100%; height: 100%; object-fit: cover; }
.card:hover .card__media img { filter: none; transform: scale(1.04); }

.card__tag {
  position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.08); padding: .3em .7em; font-family: var(--disp); font-size: .54rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; z-index: 3;
}
.card[data-cat="town"] .card__tag { background: rgba(255,255,255,.92); }
.card[data-cat="country"] .card__tag { background: rgba(224,244,237,.92); border-color: var(--green); color: #166448; }
.card[data-cat="courtyard"] .card__tag { background: rgba(238,247,246,.92); border-color: #87cdc9; color: #1a5e5c; }
.card[data-cat="public"] .card__tag { background: rgba(251,249,219,.92); border-color: var(--lime); color: #6d6e15; }

.card__body { padding: .9rem 1.1rem 1.2rem; }
.card__title { font-size: clamp(1.08rem, 1.6vw, 1.35rem); margin-top: 0; }
.card__meta { margin-top: .4rem; font-family: var(--disp); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); padding-bottom: .5rem; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; }
.card__sum { margin-top: .6rem; color: var(--ink-70); font-size: .86rem; line-height: 1.6; }
.card__more { display: inline-flex; align-items: center; gap: .5em; margin-top: .9rem; font-family: var(--disp); font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--green); transition: gap .25s; }
.card:hover .card__more { gap: .75em; }

/* ---- Homepage cards: clean 3-col, override base.css editorial rhythm ---- */
.page-home.cards-grid .cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.5vw, 2.2rem);
}
.page-home.cards-grid .card:nth-child(n) {
  grid-column: span 1;
  margin-top: 0;
}
.page-home.cards-grid .card:nth-child(n) .card__media {
  aspect-ratio: 5 / 4;
}
/* The middle card drops by exactly one 48px grid square, so the stagger
   lines up with the CAD grid behind it and reads as deliberate. */
.page-home.cards-grid .card:nth-child(2) { transform: translateY(3rem); }
.page-home.cards-grid .card:nth-child(2):hover { transform: translateY(calc(3rem - 4px)); }
@media (max-width: 960px) {
  .page-home.cards-grid .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home.cards-grid .card:nth-child(2) { transform: none; }
  .page-home.cards-grid .card:nth-child(2):hover { transform: translateY(-4px); }
}
@media (max-width: 560px) {
  .page-home.cards-grid .cards { grid-template-columns: 1fr; }
}

/* ---------- Services ---------- */
.sec--services {  padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.services {  }
.service { padding-block: 1.6rem;  border-left: 3px solid transparent; padding-left: 1.2rem; transition: border-color .25s, background .25s, padding-left .25s;  border-bottom: 1px solid var(--rule); }
.service:nth-child(1) { border-left-color: var(--green); }
.service:nth-child(2) { border-left-color: var(--lime); }
.service:nth-child(3) { border-left-color: var(--sky); }
.service:nth-child(4) { border-left-color: var(--pink); }
.service:hover { border-left-width: 5px; padding-left: 1.5rem; background: rgba(43,165,121,.02); }
.service__head { display: flex; justify-content: space-between; align-items: baseline; }
.service__head h3 { font-size: 1.3rem; }
.service__head span { font-family: var(--disp); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-dark); }
.service:nth-child(1) .service__head span { color: var(--green); }
.service:nth-child(2) .service__head span { color: var(--lime-dark); }
.service:nth-child(3) .service__head span { color: var(--sky-dark); }
.service:nth-child(4) .service__head span { color: var(--pink); }
.service p { margin-top: .55rem; color: var(--ink-70); font-size: .9rem; }

/* Redesigned CAD Architectural Service Cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: 2rem;
}

.service-card {
  background: #ffffff;
  border: 1px solid var(--rule);
  padding: 1.8rem 1.6rem;
  position: relative;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--green);
  transition: height .25s ease;
}

.service-card--green::before { background: var(--green); }
.service-card--lime::before { background: var(--lime); }
.service-card--sky::before { background: var(--sky-dark); }
.service-card--pink::before { background: var(--pink); }

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 12px 32px rgba(43, 165, 121, 0.1);
}

.service-card:hover::before {
  height: 5px;
}

.service-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}

.service-card__num {
  font-family: var(--disp);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
}

.service-card--green .service-card__num { color: var(--green); }
.service-card--lime .service-card__num { color: var(--lime-dark); }
.service-card--sky .service-card__num { color: var(--sky-dark); }
.service-card--pink .service-card__num { color: var(--pink); }

.service-card__time {
  font-family: var(--disp);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .35em .75em;
  background: var(--paper);
  border: 1px solid var(--rule);
}

.service-card--green .service-card__time { background: rgba(43, 165, 121, 0.08); border-color: rgba(43, 165, 121, 0.3); color: #166448; }
.service-card--lime .service-card__time { background: rgba(199, 200, 58, 0.12); border-color: rgba(142, 143, 23, 0.3); color: #6d6e15; }
.service-card--sky .service-card__time { background: rgba(182, 225, 223, 0.25); border-color: rgba(39, 129, 126, 0.3); color: #1a5e5c; }
.service-card--pink .service-card__time { background: rgba(239, 65, 107, 0.08); border-color: rgba(239, 65, 107, 0.3); color: #b81c42; }

.service-card__title {
  font-family: var(--disp);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: .8rem;
}

.service-card__body {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--ink-70);
  margin-top: auto;
}

/* ---------- Forms ---------- */
.field label, .field legend { font-family: var(--disp); font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-45); }
.field input, .field select, .field textarea { padding: .8rem 1rem; background: #fff; border: 1px solid var(--rule); border-radius: 0; width: 100%; font-family: var(--font); transition: border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(43,165,121,.1); }
.chip span { padding: .6em 1.2em; border: 1px solid var(--rule); background: #fff; font-size: .82rem; font-family: var(--disp); font-weight: 500; cursor: pointer; display: inline-block; transition: .2s; }
.chip span:hover { border-color: var(--green); color: var(--green); }
.chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.sent { padding: 1.8rem; border: 1px solid var(--green); background: #fff; }
.sent h2 { font-size: 1.9rem; color: var(--green); }
.sent p { margin-top: .8rem; color: var(--ink-70); }
.cblock ul { margin-top: .9rem; display: grid; gap: .45rem; color: var(--ink-70); }
.cblock a:hover { color: var(--green); }
.contact-big { font-family: var(--disp); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 500; margin-top: .6rem; letter-spacing: -.01em; }
.contact-big a { color: var(--ink); transition: color .2s; background-image: linear-gradient(var(--green), var(--green)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: color .2s, background-size .35s ease; }
.contact-big a:hover { color: var(--green); background-size: 100% 2px; }
.contact-sub {
  margin-top: .35rem;
  font-size: .88rem;
  color: var(--ink-45);
}

/* ---------- Architectural 2x2 FAQ Specification Grid ---------- */
.faq-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.5vw, 2.2rem);
  margin-top: 2.2rem;
}

.faq-spec-card {
  background: #ffffff;
  border: 1px solid var(--rule);
  padding: 2rem 1.8rem;
  position: relative;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}

.faq-spec-card::before,
.faq-spec-card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--green);
  z-index: 2;
  transition: width .3s ease, height .3s ease;
  opacity: .6;
}

.faq-spec-card::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.faq-spec-card::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

.faq-spec-card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 14px 36px rgba(43, 165, 121, 0.12), 0 4px 12px rgba(0,0,0,0.04);
}

.faq-spec-card:hover::before,
.faq-spec-card:hover::after {
  width: 16px;
  height: 16px;
  opacity: 1;
}

.faq-spec-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}

.faq-spec-card__tag {
  font-family: var(--disp);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
}

.faq-spec-card--lime .faq-spec-card__tag { color: var(--lime-dark); }
.faq-spec-card--sky .faq-spec-card__tag { color: var(--sky-dark); }
.faq-spec-card--pink .faq-spec-card__tag { color: var(--pink); }

.faq-spec-card__status {
  font-family: var(--disp);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .3em .65em;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-45);
}

.faq-spec-card--green .faq-spec-card__status { background: rgba(43, 165, 121, 0.08); border-color: rgba(43, 165, 121, 0.25); color: #166448; }
.faq-spec-card--lime .faq-spec-card__status { background: rgba(199, 200, 58, 0.12); border-color: rgba(142, 143, 23, 0.25); color: #6d6e15; }
.faq-spec-card--sky .faq-spec-card__status { background: rgba(182, 225, 223, 0.25); border-color: rgba(39, 129, 126, 0.25); color: #1a5e5c; }
.faq-spec-card--pink .faq-spec-card__status { background: rgba(239, 65, 107, 0.08); border-color: rgba(239, 65, 107, 0.25); color: #b81c42; }

.faq-spec-card__q {
  font-family: var(--disp);
  font-size: clamp(1.16rem, 1.7vw, 1.4rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .9rem;
}

.faq-spec-card__a {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--ink-70);
  margin-bottom: 1.4rem;
}

.faq-spec-card__foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--disp);
  font-size: .64rem;
  letter-spacing: .08em;
  color: var(--ink-70);
}

.faq-spec-card__foot-label {
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  margin-right: .4em;
}

.faq-spec-card--lime .faq-spec-card__foot-label { color: var(--lime-dark); }
.faq-spec-card--sky .faq-spec-card__foot-label { color: var(--sky-dark); }
.faq-spec-card--pink .faq-spec-card__foot-label { color: var(--pink); }

@media (max-width: 860px) {
  .faq-spec-grid {
    grid-template-columns: 1fr;
  }
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq:focus-visible, .faq summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.faq__num {
  font-family: var(--disp);
  font-size: .75rem;
  font-weight: 600;
  color: var(--green);
  letter-spacing: .1em;
  padding: .25em .55em;
  background: rgba(43,165,121,.08);
  border: 1px solid rgba(43,165,121,.25);
  flex-shrink: 0;
}

.faq:nth-child(2) .faq__num {
  color: var(--lime-dark);
  background: rgba(199,200,58,.1);
  border-color: rgba(142,143,23,.25);
}

.faq:nth-child(3) .faq__num {
  color: var(--sky-dark);
  background: rgba(182,225,223,.2);
  border-color: rgba(39,129,126,.25);
}

.faq:nth-child(4) .faq__num {
  color: var(--pink);
  background: rgba(239,65,107,.08);
  border-color: rgba(239,65,107,.25);
}

.faq__question {
  font-family: var(--disp);
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  flex: 1;
  letter-spacing: -.01em;
  transition: color .2s;
}

.faq summary:hover .faq__question,
.faq[open] .faq__question {
  color: var(--green);
}

.faq__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
  transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--ink-70);
  transition: transform .3s ease, opacity .25s ease, background-color .3s ease;
}

.faq__icon::before {
  top: 50%;
  left: 7px;
  right: 7px;
  height: 1.5px;
  transform: translateY(-50%);
}

.faq__icon::after {
  left: 50%;
  top: 7px;
  bottom: 7px;
  width: 1.5px;
  transform: translateX(-50%);
}

.faq summary:hover .faq__icon {
  border-color: var(--green);
  background: rgba(43,165,121,.1);
}

.faq summary:hover .faq__icon::before,
.faq summary:hover .faq__icon::after {
  background: var(--green);
}

.faq[open] .faq__icon {
  background: var(--green);
  border-color: var(--green);
  transform: rotate(45deg);
}

.faq[open] .faq__icon::before,
.faq[open] .faq__icon::after {
  background: #ffffff;
}

.faq__content {
  padding: 0 1.4rem 1.4rem calc(1.4rem + 2.5rem);
  animation: faqFadeIn .3s ease;
}

.faq__content p {
  color: var(--ink-70);
  font-size: .94rem;
  line-height: 1.7;
  max-width: 60ch;
  margin: 0;
}

@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .faq__content {
    padding-left: 1.4rem;
  }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 3px solid var(--green); background: #c7c83a; padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot-cta { padding-bottom: 2.6rem;   border-bottom: 1px solid var(--rule); }
.foot-cta__title { font-size: clamp(2rem, 4.5vw, 3.5rem); margin-top: .7rem; }
.foot-cta__body { max-width: 48ch; margin-top: 1.1rem; color: var(--ink-70); }
.foot-cta .btn { margin-top: 1.6rem; }
.foot-grid { padding-block: 2.6rem; }
.foot-col--brand img { margin-bottom: 1rem; }
.foot-col p { font-size: .88rem; max-width: 30ch; color: var(--ink-70); }
.foot-col .muted { color: var(--ink-45); }
.foot-col h3 { margin-bottom: 1rem; }
/* Rotate accent colours on footer column headers */
.foot-col:nth-child(2) h3 { color: var(--green); }
.foot-col:nth-child(3) h3 { color: var(--lime-dark); }
.foot-col:nth-child(4) h3 { color: var(--sky-dark); }
.foot-col a { font-size: .88rem; color: var(--ink-70); transition: color .2s; }
.foot-col a:hover { color: var(--green); }
.foot-base { padding-top: 1.4rem;  font-family: var(--disp); font-size: .7rem; letter-spacing: .04em; color: var(--ink-45); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.footer-login {
  font-family: var(--disp); font-size: .64rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-45); border: 1px solid var(--rule);
  padding: .45em 1em; text-decoration: none; transition: color .2s, border-color .2s;
}
.footer-login:hover { color: var(--green); border-color: var(--green); }


/* Portfolio custom 3-col grid */
.page-portfolio .cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.page-portfolio .card {
  margin-top: 0;
}
.page-portfolio .card:nth-child(3n + 2) {
  transform: translateY(3rem);
}
.page-portfolio .card:nth-child(3n + 2):hover {
  transform: translateY(calc(3rem - 4px));
}
@media (max-width: 960px) {
  .page-portfolio .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-portfolio .card:nth-child(3n + 2) { transform: none; }
  .page-portfolio .card:nth-child(3n + 2):hover { transform: translateY(-4px); }
  .page-portfolio .card:nth-child(even) { transform: translateY(3rem); }
  .page-portfolio .card:nth-child(even):hover { transform: translateY(calc(3rem - 4px)); }
}
@media (max-width: 600px) {
  .page-portfolio .cards { grid-template-columns: 1fr; }
  .page-portfolio .card:nth-child(even) { transform: none; }
  .page-portfolio .card:nth-child(even):hover { transform: translateY(-4px); }
}



/* Contact Image Slider */
.contact-slider {
  position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden;
}
.contact-slider img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
  /* Crossfade only. A slow scale here fought the 4s cycle - the outgoing image
     started zooming back out while it was still visible, which read as a shake. */
  opacity: 0; transition: opacity 1.5s ease-in-out;
  will-change: opacity; backface-visibility: hidden;
}
.contact-slider img.active {
  opacity: 1;
}

/* Stylish underlines for big headings on all pages except Origin Story */
body:not(.page-about) .page-title,
body:not(.page-about) .sec-title,
body:not(.page-about) .hero__huge {
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* Clean Project Descriptions */
.prose p {
    color: #000;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* Social glyph in the footer - sized to the type it sits beside */
.social-link { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.ico-social { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* ---------- Project galleries ---------- */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 2rem;
}
.project-gallery--before {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* On a phone the same photos become a strip you swipe through, so a
   fifteen-photo project is one screen instead of fifteen. */
@media (max-width: 767px) {
  .project-gallery {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* let the strip run to both screen edges, past the page margins */
    margin-inline: calc(-1 * var(--gutter, 1.25rem));
    padding-inline: var(--gutter, 1.25rem);
    padding-bottom: .75rem;
    scroll-padding-inline: var(--gutter, 1.25rem);
    scrollbar-width: thin;
  }
  .project-gallery > * {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  .project-gallery img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  /* a hint that there is more to the right */
  .project-gallery::after {
    content: "";
    flex: 0 0 1px;
  }
}

/* ---------- Card lists swipe sideways on a phone ---------- */
/* One card per screen stacked vertically means a very long scroll once a
   studio has a dozen projects. Sideways is shorter and reads like a set. */
@media (max-width: 767px) {
  .cards {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter, 1.25rem));
    padding-inline: var(--gutter, 1.25rem);
    padding-bottom: .75rem;
    scroll-padding-inline: var(--gutter, 1.25rem);
  }
  .cards > .card {
    flex: 0 0 82%;
    scroll-snap-align: center;
    /* the staggered desktop offset would look wrong in a row */
    transform: none !important;
  }
  /* Every card the same height so the strip lines up. The template sets a
     portrait ratio inline on alternating cards, which only works in a grid. */
  .cards > .card .card__img {
    aspect-ratio: 4 / 3 !important;
  }
  .cards > .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cards::after { content: ""; flex: 0 0 1px; }
}

/* ---------- Common questions swipe sideways on a phone ---------- */
/* Scoped to .sec--faq on purpose: the admin FAQ editor reuses these card
   styles, and a form you edit should stay stacked, not become a carousel.
   Works for any number of questions - add or remove them in the admin and
   the strip simply gets longer or shorter. */
@media (max-width: 767px) {
  .sec--faq .faq-spec-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter, 1.25rem));
    padding-inline: var(--gutter, 1.25rem);
    padding-bottom: .75rem;
    scroll-padding-inline: var(--gutter, 1.25rem);
    /* size each card to its own content: stretching them all to match the
       longest answer left a big empty gap above the footer */
    align-items: flex-start;
  }
  .sec--faq .faq-spec-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
    margin: 0;
    padding: 1.35rem 1.25rem;
  }
  .sec--faq .faq-spec-card__header { margin-bottom: .7rem; }
  .sec--faq .faq-spec-card__q {
    font-size: 1.05rem;
    margin-bottom: .6rem;
  }
  .sec--faq .faq-spec-card__a {
    font-size: .875rem;
    line-height: 1.55;
    margin-bottom: .9rem;
  }
  .sec--faq .faq-spec-card__foot {
    margin-top: 0;
    padding-top: .8rem;
  }
  .sec--faq .faq-spec-grid::after { content: ""; flex: 0 0 1px; }
}

/* ---------- Footer: shorter on phones and tablets ---------- */
/* The footer ran to 1336px on a phone - more than a screen and a half of
   links after the content had finished. Two columns instead of one, and
   tighter spacing throughout, without touching the desktop layout. */
@media (max-width: 1023px) {
  .site-footer { padding-block: clamp(2rem, 5vw, 3rem) 1.25rem; }
  .foot-cta { padding-bottom: 1.8rem; }
  .foot-cta__title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .foot-cta__body { margin-top: .8rem; font-size: .92rem; }
  .foot-cta .btn { margin-top: 1.1rem; }
  .foot-grid { padding-block: 1.5rem; gap: 1.25rem 1.25rem; }
  .foot-col h3 { margin-bottom: .45rem; }
  .foot-col li { line-height: 1.5; }
  .foot-base { font-size: .65rem; }
}

/* A tablet is wide enough for all four columns side by side, which turns
   three stacked rows of links into one. */
@media (min-width: 768px) and (max-width: 1023px) {
  .foot-grid { grid-template-columns: 1.3fr repeat(2, 1fr) !important; }
  .foot-col a, .foot-col p { font-size: .8rem; }
}

@media (max-width: 767px) {
  /* two columns of links rather than one long stack */
  .foot-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* the brand block reads better full width above them */
  .foot-col--brand { grid-column: 1 / -1; }
  .foot-col--brand img { max-width: 140px; margin-bottom: .6rem; }
  .foot-col--brand p { margin: 0; }
  .foot-col a, .foot-col p { font-size: .82rem; }
  .foot-cta__body { font-size: .88rem; max-width: 36ch; }
  .foot-base { padding-top: .9rem; gap: .4rem; }
}

/* ---------- Footer: one row on a wide screen ---------- */
/* The closing message and the link columns were stacked, so the footer ran
   to 767px on desktop. Side by side they fit in roughly half that, with no
   change to type size - it just uses the width that was already there. */
@media (min-width: 1024px) {
  .site-footer .wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .foot-cta {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .foot-grid {
    padding-block: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 2.5rem;
  }
  .foot-col li { white-space: nowrap; }
  .foot-col--brand { grid-column: 1 / -1; }
  .foot-col--brand img { max-width: 150px; }
  /* the credit line still runs the full width underneath */
  .foot-base {
    grid-column: 1 / -1;
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
  }
}

/* ---------- Every photo has square corners ---------- */
/* The whole site is square-cornered. Anything added later inherits this:
   a new project, a gallery image, a replaced portrait. Only an inline
   style on the element itself can override it, so avoid those. */
.card__img,
.card__media,
.card__media img,
.project-gallery img,
.contact-slider,
.contact-slider img,
.prose + div,
.foot-col--brand img {
  border-radius: 0;
}

/* ---------- Client video row ---------- */
/* Thumbnails only until someone presses play - the YouTube player is about
   a megabyte of script and sets tracking cookies, so it is loaded on click
   rather than on page load. */
.video-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 2.2rem;
}
/* The questions section below already brings its own top spacing. */
.sec--videos { padding-bottom: 0; }
.sec--videos + .sec--faq { padding-top: clamp(2.5rem, 4vw, 4rem); }
.video-card { margin: 0; }
.video-card__play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--rule);
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.video-card__play img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease, opacity .3s ease;
}
.video-card__play:hover img { transform: scale(1.03); opacity: .9; }
.video-card__icon {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.video-card__icon svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.video-card__icon-bg { fill: rgba(18,18,18,.78); transition: fill .25s ease; }
.video-card__play:hover .video-card__icon-bg { fill: var(--green); }
.video-card__play:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.video-card iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--rule); display: block;
}
.video-card figcaption {
  font-family: var(--disp); font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-70); margin-top: .75rem;
}

/* Same swipe strip as the project cards and the questions. */
@media (max-width: 767px) {
  .video-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter, 1.25rem));
    padding-inline: var(--gutter, 1.25rem);
    padding-bottom: .75rem;
    scroll-padding-inline: var(--gutter, 1.25rem);
  }
  .video-row > .video-card { flex: 0 0 82%; scroll-snap-align: center; }
  .video-row::after { content: ""; flex: 0 0 1px; }
}

/* ---------- Always-visible swipe bar ---------- */
/* Phone browsers fade their own scrollbar out once a swipe stops, and CSS
   cannot keep it on screen. site.js puts this bar under every swipe strip
   and moves the green part to match the scroll position. */
.swipe-bar { display: none; }
@media (max-width: 767px) {
  .swipe-bar {
    display: block;
    position: relative;
    height: 3px;
    margin-top: .5rem;
    background: var(--rule);
    overflow: hidden;
  }
  /* the browser's own scrollbar would show as a second bar - hide it */
  .cards, .video-row, .project-gallery, .sec--faq .faq-spec-grid {
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar, .video-row::-webkit-scrollbar,
  .project-gallery::-webkit-scrollbar, .sec--faq .faq-spec-grid::-webkit-scrollbar {
    display: none;
  }
  .swipe-bar__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--green);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .video-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}