/* ==========================================================================
   EES MODEL — Page & section styles
   ========================================================================== */

/* ------------------------------------------------------------------- HERO */
/* Content sits dead centre; the stats rail is pinned to the bottom so it never
   drags the headline off centre. padding-top clears the fixed nav. */
.hero { position: relative; min-height: 100svh; display: flex; align-items: stretch; overflow: hidden;
  padding-top: clamp(118px, 15vh, 170px); padding-bottom: clamp(48px, 7vh, 96px); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.5s var(--ease), transform 7s linear;
}
.hero__media img.is-on { opacity: 1; transform: scale(1); }
/* Light scrim — enough to blend the foot into the page and hold text legible,
   while letting the architectural photo read clearly. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(19,20,24,.45) 0%, rgba(19,20,24,.12) 34%, rgba(19,20,24,.42) 74%, var(--bg) 100%),
    radial-gradient(120% 70% at 50% 46%, transparent 42%, rgba(19,20,24,.34) 100%);
}
/* Diagonal slash overlay echoing the logo */
.hero__slash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .35;
  background-image: repeating-linear-gradient(135deg, transparent 0 54px, rgba(244,242,239,.07) 54px 55px, transparent 55px 110px); }

.hero__inner {
  position: relative; z-index: 3; width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
/* Legibility over the now-visible photo comes from a soft shadow, not a heavy scrim */
.hero__title { margin-bottom: 26px; text-shadow: 0 2px 34px rgba(0,0,0,.5); }
.hero__lead { text-shadow: 0 1px 18px rgba(0,0,0,.55); }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: block; transform: translateY(105%); animation: riseIn .95s var(--ease) forwards; }
.hero__title .ln:nth-child(1) > span { animation-delay: .06s; }
.hero__title .ln:nth-child(2) > span { animation-delay: .18s; }
.hero__title .ln:nth-child(3) > span { animation-delay: .30s; }
@keyframes riseIn { to { transform: translateY(0); } }

.hero__lead { max-width: 54ch; margin-inline: auto; font-size: clamp(.98rem, 1.2vw, 1.08rem); color: var(--muted); opacity: 0; animation: fadeUp .9s var(--ease) .46s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Hero slide indicators, pinned to the foot of the hero and centred */
.hero__rail {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(22px, 4vh, 40px); z-index: 3;
  display: flex; justify-content: center;
  opacity: 0; animation: fadeUp .9s var(--ease) .5s forwards;
}
.hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(22px, 4vw, 56px); }
.hero__stat b { display: block; font-family: var(--sans); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: var(--text); line-height: 1; letter-spacing: -.03em; }
.hero__stat span { display: block; margin-top: 8px; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-family: var(--sans); }
.hero__dots { display: flex; gap: 8px; }
.hero__dots button { width: 30px; height: 4px; background: rgba(244,242,239,.22); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); transition: background .4s, width .4s var(--ease); }
.hero__dots button.is-on { background: var(--accent); width: 46px; }

.scrollcue { position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%); display: grid; place-items: center; gap: 8px; color: var(--faint); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; font-family: var(--sans); font-weight: 600; }
.scrollcue i { display: block; width: 1px; height: 42px; background: linear-gradient(180deg, var(--accent), transparent); animation: cue 2s var(--ease-io) infinite; }
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 700px) { .scrollcue { display: none; } }

/* -------------------------------------------------------- PAGE HERO (inner) */
.phero { position: relative; padding-top: clamp(140px, 19vh, 220px); padding-bottom: clamp(52px, 7vw, 96px); overflow: hidden; }
.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(19,20,24,.9), rgba(19,20,24,.55) 45%, var(--bg)); }
.phero__slash { position: absolute; inset: 0; z-index: 2; opacity: .4; pointer-events: none; background-image: repeating-linear-gradient(135deg, transparent 0 46px, var(--line) 46px 47px, transparent 47px 94px); }
.phero__inner { position: relative; z-index: 3; }
.phero__lead { max-width: 62ch; margin-top: 24px; }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.crumbs a { color: var(--faint); transition: color .3s; }
.crumbs a:hover { color: var(--accent); }
.crumbs i { width: 12px; height: 6px; background: var(--dim); clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%); }

/* ------------------------------------------------------------ MARQUEE (clients) */
.marquee { position: relative; padding-block: clamp(30px, 4vw, 46px); border-block: 1px solid var(--line); overflow: hidden; background: var(--ink); }
.marquee__track { display: flex; gap: clamp(40px, 6vw, 90px); width: max-content; animation: slide 42s linear infinite; align-items: center; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee img { height: clamp(24px, 3vw, 34px); width: auto; opacity: .42; filter: grayscale(1); transition: opacity .4s, filter .4s; }
.marquee img:hover { opacity: 1; filter: none; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(50px, 9vw, 140px); z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

/* ------------------------------------------------------------------ ABOUT */
.about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 940px) { .about__grid { grid-template-columns: 1fr; } }
.about__media { position: relative; }
.about__media .media { aspect-ratio: 4/5; }
/* Orange framing bracket, offset on the diagonal */
/* Offset orange bracket — only the overhang shows, the rest sits behind the photo */
.about__frame { position: absolute; inset: auto -22px -22px auto; width: 60%; height: 60%;
  border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent);
  pointer-events: none; z-index: -1; }
.about__badge {
  position: absolute; left: -14px; bottom: 34px; --cut: 12px;
  background: var(--accent); color: #fff; padding: 20px 26px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.about__badge b { display: block; font-family: var(--sans); font-weight: 800; font-size: 2rem; line-height: 1; }
.about__badge span { display: block; margin-top: 6px; font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-family: var(--sans); opacity: .88; }
.about__body p + p { margin-top: 20px; }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--bg); padding: clamp(24px, 3vw, 40px) clamp(18px, 2vw, 30px); position: relative; transition: background .45s var(--ease); }
.stat:hover { background: var(--surface); }
.stat::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width .55s var(--ease); }
.stat:hover::after { width: 100%; }
.stat b { display: block; font-family: var(--sans); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 3rem); color: var(--text); line-height: 1; letter-spacing: -.035em; }
.stat span { display: block; margin-top: 12px; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-family: var(--sans); }

/* --------------------------------------------------- VISION / MISSION / VALUES */
.vm { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 800px) { .vm { grid-template-columns: 1fr; } }
.vm__card { --cut: clamp(24px, 3vw, 44px); padding: clamp(30px, 4vw, 52px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; transition: transform .5s var(--ease); }
.vm__card:hover { transform: translateY(-5px); }
.vm__card--a { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.vm__card--b { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.vm__card h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 18px; text-transform: uppercase; letter-spacing: -.025em; }
.vm__card p { color: var(--faint); }
.vm__ghost { position: absolute; right: -10px; bottom: -34px; font-family: var(--sans); font-weight: 800; font-size: clamp(5rem, 11vw, 9rem); line-height: 1; color: rgba(244,242,239,.028); pointer-events: none; letter-spacing: -.05em; }
.vm__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-16), transparent 50%); opacity: 0; transition: opacity .5s; }
.vm__card:hover::before { opacity: 1; }
/* Lift content above the hover wash — but leave the ghost numeral absolute. */
.vm__card > *:not(.vm__ghost) { position: relative; }

/* ------------------------------------------------------------- PLACEHOLDERS
   Before photography is attached, media blocks show the diagonal grid instead
   of an empty rectangle — an unset image reads as designed, not broken.
   The pattern is only ever visible when no <img> covers it. */
.svc__media, .proj__media, .media {
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(135deg,
    transparent 0 20px, rgba(187, 182, 176, .05) 20px 21px, transparent 21px 42px);
}

/* ---------------------------------------------------------------- SERVICES */
.svc { position: relative; display: block; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: transform .55s var(--ease), background .5s; }
.svc:hover { transform: translateY(-6px); background: var(--surface-2); }
.svc__media { aspect-ratio: 3/2; overflow: hidden; position: relative; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; filter: grayscale(.55) brightness(.82); }
.svc:hover .svc__media img { transform: scale(1.07); filter: grayscale(0) brightness(.95); }
.svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--surface)); }
.svc__num { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--sans); font-weight: 800; font-size: .72rem; letter-spacing: .14em; color: #fff; background: var(--accent); padding: 6px 11px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.svc__body { padding: clamp(22px, 2.6vw, 32px); position: relative; }
.svc__body h3 { font-size: clamp(1.1rem, 1.5vw, 1.34rem); text-transform: uppercase; letter-spacing: -.015em; transition: color .35s; }
.svc:hover .svc__body h3 { color: var(--accent); }
.svc__body p { margin-top: 12px; font-size: .93rem; color: var(--faint); line-height: 1.66; }
.svc__go { margin-top: 20px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); transition: color .35s, gap .35s var(--ease); }
.svc:hover .svc__go { color: var(--accent); gap: 15px; }

/* Service detail: what we offer list */
.offer { display: grid; gap: 1px; background: var(--line); margin-top: 12px; }
.offer li { background: var(--bg); padding: 20px clamp(18px, 2.4vw, 30px); display: flex; align-items: flex-start; gap: 16px; transition: background .4s, padding-left .4s var(--ease); }
.offer li:hover { background: var(--surface); padding-left: calc(clamp(18px, 2.4vw, 30px) + 8px); }
.offer li i { flex: none; width: 14px; height: 8px; margin-top: 9px; background: var(--accent); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }

/* Two-column detail layout */
.detail { display: grid; grid-template-columns: 1.35fr .8fr; gap: clamp(34px, 5vw, 76px); align-items: start; }
@media (max-width: 940px) { .detail { grid-template-columns: 1fr; } }
.detail__body p + p { margin-top: 20px; }
.detail__body h3 { margin-top: 44px; margin-bottom: 20px; font-size: clamp(1.2rem, 1.8vw, 1.55rem); text-transform: uppercase; }
.detail__aside { position: sticky; top: 110px; }
@media (max-width: 940px) { .detail__aside { position: static; } }
.factbox { --cut: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(24px, 3vw, 34px);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.factbox dl { display: grid; gap: 0; margin: 0; }
.factbox dt { font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--accent); }
.factbox dd { margin: 7px 0 0; color: var(--text); font-size: .98rem; }
.factbox dd + dt { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- PROJECTS */
.proj { position: relative; display: block; overflow: hidden; isolation: isolate;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.proj__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--ink); }
.proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.15s var(--ease), filter .6s; filter: grayscale(.35); }
.proj:hover .proj__media img { transform: scale(1.07); filter: grayscale(0); }
.proj__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 22%, rgba(19,20,24,.62) 55%, rgba(19,20,24,.97) 88%); transition: background .5s; }
.proj:hover .proj__scrim { background: linear-gradient(180deg, rgba(200,119,50,.16) 0%, rgba(19,20,24,.68) 52%, rgba(19,20,24,.98) 88%); }
.proj__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 2.6vw, 32px); z-index: 2; }
.proj__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.proj__meta i { width: 4px; height: 4px; background: var(--dim); transform: rotate(45deg); }
.proj__meta em { font-style: normal; color: var(--faint); }
.proj__cap h3 { font-size: clamp(1.25rem, 2.1vw, 1.85rem); text-transform: uppercase; letter-spacing: -.028em; transition: transform .5s var(--ease); }
.proj:hover .proj__cap h3 { transform: translateX(6px); }
.proj__go { margin-top: 14px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.proj:hover .proj__go { opacity: 1; transform: none; }
.proj--tall .proj__media { aspect-ratio: 3/4; }
.proj--wide .proj__media { aspect-ratio: 16/10; }
@media (max-width: 640px) { .proj--tall .proj__media, .proj--wide .proj__media { aspect-ratio: 4/3; } }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 4vw, 46px); }
.filters button {
  --cut: 9px;
  padding: 11px 20px;
  font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background .35s, color .35s;
}
.filters button:hover { color: var(--text); background: var(--surface-2); }
.filters button.is-on { background: var(--accent); color: #fff; box-shadow: none; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.gallery button { position: relative; display: block; overflow: hidden; aspect-ratio: 4/3; background: var(--ink); width: 100%;
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s; }
.gallery button:hover img { transform: scale(1.07); }
.gallery button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-32), transparent 60%); opacity: 0; transition: opacity .45s; }
.gallery button:hover::after { opacity: 1; }
.gallery button i { position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--accent); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.gallery button:hover i { opacity: 1; transform: none; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 150; background: rgba(12,13,16,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.lb.is-open { opacity: 1; visibility: visible; }
.lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px var(--gutter); border-bottom: 1px solid var(--line); }
.lb__t { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.lb__t em { display: block; font-style: normal; font-size: .66rem; font-weight: 500; letter-spacing: .13em; color: var(--faint); margin-top: 5px; }
.lb__n { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--faint); }
.lb__n b { color: var(--accent); }
.lb__x { width: 42px; height: 42px; display: grid; place-items: center; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-str); transition: background .3s, color .3s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.lb__x:hover { background: var(--accent); color: #fff; }
.lb__stage { position: relative; display: grid; place-items: center; padding: clamp(14px, 3vw, 34px); overflow: hidden; }
.lb__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.lb__arw { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; display: grid; place-items: center; color: var(--text); background: rgba(36,39,44,.8); box-shadow: inset 0 0 0 1px var(--line-str); transition: background .3s, color .3s;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); z-index: 3; }
.lb__arw:hover { background: var(--accent); color: #fff; }
.lb__arw--p { left: clamp(8px, 2vw, 26px); }
.lb__arw--n { right: clamp(8px, 2vw, 26px); }
.lb__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 16px var(--gutter); border-top: 1px solid var(--line); scrollbar-width: thin; }
.lb__thumbs img { width: 78px; height: 56px; object-fit: cover; flex: none; opacity: .38; cursor: pointer; transition: opacity .3s, outline-color .3s; outline: 2px solid transparent; outline-offset: -2px; }
.lb__thumbs img:hover { opacity: .75; }
.lb__thumbs img.is-on { opacity: 1; outline-color: var(--accent); }

/* --------------------------------------------------------------- APPROACH */
.approach { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 860px) { .approach { grid-template-columns: 1fr; } }
.appr { position: relative; overflow: hidden; --cut: clamp(26px, 3.4vw, 50px);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.appr img { width: 100%; aspect-ratio: 16/11; object-fit: cover; filter: grayscale(.6) brightness(.55); transition: transform 1.2s var(--ease), filter .6s; }
.appr:hover img { transform: scale(1.06); filter: grayscale(.2) brightness(.62); }
.appr__cap { position: absolute; inset: auto 0 0 0; padding: clamp(24px, 3.2vw, 44px); background: linear-gradient(180deg, transparent, rgba(19,20,24,.82) 42%, rgba(19,20,24,.97)); }
.appr__cap h3 { font-size: clamp(1.2rem, 2vw, 1.7rem); text-transform: uppercase; letter-spacing: -.025em; margin-bottom: 12px; }
.appr__cap p { color: var(--muted); font-size: .95rem; max-width: 46ch; }

/* -------------------------------------------------------------------- WHY */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 1000px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } }
.why__i { background: var(--bg); padding: clamp(28px, 3.4vw, 44px); position: relative; overflow: hidden; transition: background .45s var(--ease); }
.why__i:hover { background: var(--surface); }
.why__i b { font-family: var(--sans); font-weight: 800; font-size: 2.4rem; color: rgba(244,242,239,.07); line-height: 1; display: block; margin-bottom: 20px; transition: color .45s; letter-spacing: -.04em; }
.why__i:hover b { color: var(--accent-32); }
.why__i h3 { font-size: 1.06rem; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 12px; }
.why__i p { font-size: .92rem; color: var(--faint); line-height: 1.66; }
.why__i::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.why__i:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------- CTA */
.cta { position: relative; overflow: hidden; background: var(--ink); }
.cta__slash { position: absolute; inset: 0; opacity: .55; background-image: repeating-linear-gradient(135deg, transparent 0 50px, var(--line) 50px 51px, transparent 51px 102px); }
.cta__glow { position: absolute; top: 50%; left: 50%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--accent-16), transparent 62%); pointer-events: none; }
.cta__inner { position: relative; text-align: center; display: grid; justify-items: center; }
.cta__inner h2 { max-width: 24ch; text-wrap: balance; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }

/* ------------------------------------------------------------------ CONTACT */
.contact__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(34px, 5vw, 78px); align-items: start; }
@media (max-width: 940px) { .contact__grid { grid-template-columns: 1fr; } }

.cinfo { display: grid; gap: 1px; background: var(--line); }
.cinfo__i { background: var(--bg); padding: clamp(20px, 2.4vw, 28px); display: flex; gap: 18px; align-items: flex-start; transition: background .4s; }
.cinfo__i:hover { background: var(--surface); }
.cinfo__ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: var(--accent-16); color: var(--accent); transition: background .35s, color .35s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.cinfo__i:hover .cinfo__ic { background: var(--accent); color: #fff; }
.cinfo__ic img { width: 18px; height: 18px; object-fit: contain; }
.cinfo__k { font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.cinfo__v { display: block; margin-top: 6px; color: var(--text); font-size: 1rem; transition: color .3s; word-break: break-word; }
a.cinfo__v:hover { color: var(--accent); }

/* Form */
.form { --cut: clamp(24px, 3vw, 42px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(26px, 3.6vw, 48px);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
/* Dynamic fields flow in a wrapping row; half-width fields pair up, full span. */
.form__fields { display: flex; flex-wrap: wrap; gap: 0 clamp(14px, 1.8vw, 22px); }
.form__fields .field { flex: 1 1 100%; }
.form__fields .field--half { flex: 1 1 calc(50% - clamp(14px, 1.8vw, 22px)); }
@media (max-width: 560px) { .form__fields .field--half { flex: 1 1 100%; } }
.field { margin-bottom: clamp(14px, 1.8vw, 22px); position: relative; }
.field label { display: block; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; transition: color .3s; }
.field:focus-within label { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%; padding: 15px 18px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 0;
  font-size: .96rem; font-family: var(--body);
  transition: border-color .35s, background .35s, box-shadow .35s;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 148px; resize: vertical; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--bg-2); box-shadow: 0 0 0 3px var(--accent-08); }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #C4553A; }
.field__err { display: none; margin-top: 8px; font-size: .78rem; color: #E27A5E; }
.field.has-error .field__err { display: block; }
.field__hint { display: block; margin-top: 8px; font-size: .74rem; color: var(--dim); }

/* File upload — style the button, keep the native input accessible */
.field input[type="file"] { padding: 13px 16px; cursor: pointer; color: var(--muted); font-size: .9rem; }
.field input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 8px 16px; cursor: pointer;
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--accent); border: 0;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: background .3s;
}
.field input[type="file"]::file-selector-button:hover { background: var(--accent-hi); }

/* Checkbox field — inline box + label, no uppercase caption above */
.field--check .field__check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.field--check input[type="checkbox"] {
  flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 0;
  accent-color: var(--accent);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.field--check .field__check span { font-size: .95rem; color: var(--muted); line-height: 1.5; }

.hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.form__note { margin-top: 18px; font-size: .8rem; color: var(--faint); line-height: 1.6; }
.form__msg { display: none; margin-bottom: 22px; padding: 16px 20px; font-size: .92rem;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.form__msg.is-on { display: block; }
.form__msg--ok { background: rgba(76, 145, 92, .14); color: #8FCF9E; box-shadow: inset 0 0 0 1px rgba(76,145,92,.3); }
.form__msg--bad { background: rgba(196, 85, 58, .14); color: #E89078; box-shadow: inset 0 0 0 1px rgba(196,85,58,.3); }
.btn.is-busy { pointer-events: none; opacity: .68; }
.btn.is-busy::after { content: ""; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.map { --cut: clamp(24px, 3vw, 42px); margin-top: clamp(32px, 4vw, 56px); overflow: hidden; filter: grayscale(1) invert(.9) contrast(.86); transition: filter .6s;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.map:hover { filter: grayscale(.55) invert(.9) contrast(.9); }
.map iframe { display: block; width: 100%; height: clamp(280px, 40vw, 420px); border: 0; }

/* ------------------------------------------------------------- MAINTENANCE */
.mnt { min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden; padding: var(--gutter); text-align: center; }
.mnt__bg { position: absolute; inset: 0; z-index: 0; }
.mnt__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.mnt::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 45%, rgba(200,119,50,.12), transparent 58%), linear-gradient(180deg, rgba(19,20,24,.82), rgba(19,20,24,.95)); }
.mnt__slash { position: absolute; inset: 0; z-index: 2; opacity: .45; pointer-events: none; background-image: repeating-linear-gradient(135deg, transparent 0 50px, rgba(244,242,239,.06) 50px 51px, transparent 51px 102px); }
.mnt__inner { position: relative; z-index: 3; max-width: 660px; display: grid; justify-items: center; }
.mnt__logo { width: clamp(120px, 17vw, 180px); margin-bottom: 40px; }
.mnt__inner h1 { font-size: clamp(2.1rem, 6.4vw, 4.2rem); margin-bottom: 22px; }
.mnt__inner p { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.14rem); }
.mnt__rule { width: 90px; height: 3px; background: var(--accent); margin: 34px 0; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.mnt__links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }
.mnt__gears { position: absolute; z-index: 2; inset: 0; pointer-events: none; }

/* ---------------------------------------------------------------- 404 */
.e404 { min-height: 76svh; display: grid; place-items: center; text-align: center; position: relative; }
.e404__num { font-family: var(--sans); font-weight: 800; font-size: clamp(6rem, 22vw, 16rem); line-height: .84; color: rgba(244,242,239,.05); letter-spacing: -.06em; }
.e404__in { position: relative; display: grid; justify-items: center; }
.e404__body { margin-top: -6%; display: grid; justify-items: center; }

/* ------------------------------------------------------------------ PAGINATION */
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: clamp(38px, 5vw, 64px); }
.pager a, .pager span { --cut: 8px; min-width: 44px; height: 44px; display: grid; place-items: center; padding-inline: 14px;
  font-family: var(--sans); font-size: .78rem; font-weight: 700; color: var(--faint);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background .3s, color .3s; }
.pager a:hover { background: var(--surface-2); color: var(--text); }
.pager .current { background: var(--accent); color: #fff; box-shadow: none; }

/* -------------------------------------------------------- NEXT/PREV FOOTER NAV */
.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 640px) { .pnav { grid-template-columns: 1fr; } }
.pnav a { background: var(--bg); padding: clamp(26px, 3.4vw, 46px) clamp(20px, 3vw, 40px); transition: background .45s; position: relative; overflow: hidden; }
.pnav a:hover { background: var(--surface); }
.pnav span { font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.pnav strong { display: block; margin-top: 12px; font-family: var(--sans); font-weight: 800; font-size: clamp(1.1rem, 1.9vw, 1.6rem); color: var(--text); text-transform: uppercase; letter-spacing: -.025em; transition: transform .5s var(--ease); }
.pnav a:hover strong { transform: translateX(6px); }
.pnav a:last-child { text-align: right; }
.pnav a:last-child:hover strong { transform: translateX(-6px); }
@media (max-width: 640px) { .pnav a:last-child { text-align: left; } .pnav a:last-child:hover strong { transform: translateX(6px); } }

/* --------------------------------------------------------------- WP EDITOR */
.entry > * + * { margin-top: 20px; }
.entry h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 44px; text-transform: uppercase; }
.entry h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-top: 36px; text-transform: uppercase; }
.entry a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry ul, .entry ol { padding-left: 22px; list-style: disc; }
.entry ol { list-style: decimal; }
.entry li { margin-top: 8px; }
.entry blockquote { border-left: 2px solid var(--accent); padding-left: 24px; font-size: 1.1rem; color: var(--text); }
.entry img { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.entry table { width: 100%; border-collapse: collapse; }
.entry th, .entry td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.entry th { font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.alignwide { width: 100%; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }