/*!
 * Drafthouse — Bootstrap 6 architecture & interior design template
 *
 * Design language: drawing sheet. Warm paper ground, hairline rules everywhere,
 * and metadata set the way a drawing title block sets it — label above value, in
 * small caps, aligned to a grid. Nothing is rounded and nothing is shadowed.
 *
 * The structural idea carrying the identity is the title block: every project
 * carries area, year, location and status as data rather than prose, because
 * that is the first thing anyone commissioning a building actually looks for.
 */

:root {
  --brand: oklch(48% 0.09 232);
  --kit-section-y: 5rem;
  --dh-rule: color-mix(in oklab, var(--bs-fg-body), transparent 84%);
}

@media (width >= 768px) { :root { --kit-section-y: 7rem; } }

[data-bs-theme="light"] {
  --bs-bg-body: #EEEAE2;
  --bs-bg-2: #EEEAE2;
}

[data-bs-theme="dark"] {
  --bs-bg-body: #EEEAE2;
  --bs-bg-2: #EEEAE2;
}

/* Nothing on a drawing sheet has rounded corners. */
.sheet,
.sheet .ph,
.proj-media,
.proj-media .ph,
.title-block {
  border-radius: 0;
}

/* ---------------------------------------------------------------
   Annotation type — the drawing-sheet voice
   --------------------------------------------------------------- */

.anno {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bs-fg-3);
}

.anno-value {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}

.rule-top { border-top: 1px solid var(--dh-rule); padding-top: 0.75rem; }

/* ---------------------------------------------------------------
   Header + hero
   --------------------------------------------------------------- */

.wordmark {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1rem;
  text-decoration: none;
}

.plate {
  position: relative;
  min-height: min(78svh, 44rem);
  display: grid;
  place-items: end start;
  padding: 5rem clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  color: var(--bs-white);
  background: linear-gradient(150deg, #2a3138, #414d57 60%, #58666f);
  overflow: hidden;
}

.plate > .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgb(20 24 28 / 78%) 0%, rgb(20 24 28 / 25%) 45%, transparent 75%);
}

.plate-inner { position: relative; z-index: 2; width: 100%; }

.plate-title {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

/* The title block: metadata in a row of labelled cells, like a drawing sheet. */
.title-block {
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 35%);
}

@media (width >= 768px) { .title-block { grid-template-columns: repeat(4, 1fr); } }

.plate .anno { color: rgb(255 255 255 / 62%); }
.plate .anno-value { color: var(--bs-white); }

/* ---------------------------------------------------------------
   Projects
   --------------------------------------------------------------- */

.proj {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--dh-rule);
  padding-top: 1.25rem;
}

.proj-media { overflow: hidden; margin-bottom: 1rem; }
.proj-media .ph { aspect-ratio: 4 / 3; }
.proj-media img { transition: scale 0.5s ease; }
.proj:hover .proj-media img { scale: 1.04; }

@media (prefers-reduced-motion: reduce) { .proj-media img { transition: none; } }

.proj-name { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; }

.proj-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.85rem;
}

/* ---------------------------------------------------------------
   Practice, services
   --------------------------------------------------------------- */

.principle {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--dh-rule);
}

.principle-no {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--bs-fg-primary);
  padding-top: 0.2rem;
}

.service-cell {
  padding: 1.5rem;
  border: 1px solid var(--dh-rule);
  height: 100%;
}

.award-row {
  display: grid;
  gap: 0.25rem 1.5rem;
  grid-template-columns: 1fr;
  padding: 1rem 0;
  border-top: 1px solid var(--dh-rule);
}

@media (width >= 768px) { .award-row { grid-template-columns: 6rem 1fr 12rem; } }

/* ---------------------------------------------------------------
   People, contact, sub page
   --------------------------------------------------------------- */

.person .ph { aspect-ratio: 1; margin-bottom: 0.85rem; }
.person-role { color: var(--bs-fg-3); font-size: 0.8125rem; }

.contact-sheet {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--dh-rule);
  background: var(--bs-bg-2);
}

.sub-head {
  padding-block: 3.5rem;
  border-bottom: 1px solid var(--dh-rule);
}

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--dh-rule);
}

.spec-row:last-child { border-bottom: 0; }

.fact-sheet {
  position: sticky;
  top: 6rem;
  padding: 1.5rem;
  border: 1px solid var(--dh-rule);
  border-top: 3px solid var(--bs-primary-base);
}

:root {
  --brand: oklch(64% 0.17 57);
  --ink: #172a2e;
  --electric: #bd4c24;
  --mint: #a6c7b4;
  --dh-rule: color-mix(in oklab, var(--ink), transparent 82%);
}

[data-bs-theme="light"] {
  --bs-bg-body: #EEEAE2;
  --bs-bg-2: #EEEAE2;
}

body { color: var(--ink); }
.wordmark { color: var(--ink); letter-spacing: 0; font-size: 1.08rem; }
.wordmark span { color: var(--electric); }
.header-logo { display: inline-flex; align-items: center; flex: none; }
.header-logo img { display: block; width: clamp(7.5rem, 13vw, 11rem); height: 3.4rem; object-fit: contain; object-position: left center; }
.header-phone { color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 650; }
.header-phone:hover, .hero-call:hover { color: var(--brand); }
dialog.drawer:not([open]) { display: none; }

@media (width >= 768px) {
  .header-logo img { width: clamp(9rem, 15vw, 13rem); height: 4rem; }
}

.plate {
  min-height: min(83svh, 48rem);
  padding: 5.5rem clamp(1.25rem, 5vw, 4.5rem) 2.25rem;
  background: #173b45;
}
.plate::after {
  background: linear-gradient(90deg, rgb(12 34 39 / 88%) 0%, rgb(12 34 39 / 70%) 46%, rgb(12 34 39 / 22%) 100%);
}
.plate-title {
  max-width: 55rem !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
}
.hero-kicker, .hero-copy, .hero-call { color: #fff; }
.hero-kicker { display: flex; align-items: center; gap: .65rem; font-size: .82rem; margin-bottom: 1.1rem; }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #bbdd8a; box-shadow: 0 0 0 .25rem rgb(187 221 138 / 17%); }
.hero-copy { max-width: 39rem; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.55; }
.hero-call { text-decoration: none; font-weight: 650; }
.plate .btn-solid.theme-primary { background: #ed9a44; border-color: #ed9a44; color: #152b30; }
.plate .btn-solid.theme-primary:hover { background: #f2b36f; border-color: #f2b36f; }
.title-block { gap: 1.25rem 2rem; margin-top: 3rem; }
.plate .anno { color: rgb(255 255 255 / 64%); }
.plate .anno-value { font-size: .98rem; }

.section-title, .coverage-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
  text-wrap: balance;
}
.section-title,
.coverage-title { font-size: clamp(2.1rem, 4vw, 3.45rem); }
.intro-section { background: #EEEAE2; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2.5rem; }
.text-link { color: var(--electric); font-size: .92rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; text-underline-offset: .25rem; }

.service-list { border-top: 1px solid var(--dh-rule); }
.service-item { border-bottom: 1px solid var(--dh-rule); }
.service-item summary { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem; gap: 1rem; align-items: center; padding: 1.3rem 0; cursor: pointer; list-style: none; }
.service-item summary::-webkit-details-marker { display: none; }
.service-no { color: var(--electric); font-size: .78rem; font-variant-numeric: tabular-nums; }
.service-name { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.12rem, 2vw, 1.5rem); line-height: 1.25; }
.service-plus { width: 1.25rem; height: 1.25rem; position: relative; }
.service-plus::before, .service-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.service-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.service-item[open] .service-plus::after { transform: translate(-50%, -50%); }
.service-detail { max-width: 54rem; padding: 0 2.5rem 1.5rem 4.25rem; color: var(--bs-fg-2); }
.service-detail p { margin-bottom: .6rem; }
.service-detail ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 2rem; padding-left: 1.1rem; margin-bottom: 0; font-size: .92rem; }
.service-detail li::marker { color: var(--electric); }

.why-section { background: #EEEAE2; }
.benefit-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.15rem 0; border-top: 1px solid var(--dh-rule); }
.benefit-mark { color: var(--electric); font-size: .78rem; padding-top: .18rem; }
.benefit-row h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 650; }
.benefit-row p { color: var(--bs-fg-2); margin: 0; font-size: .93rem; }

.coverage-band { background: #EEEAE2; color: var(--ink); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.coverage-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
.coverage-band .anno { color: var(--electric); }
.coverage-title { margin: 0; }
.coverage-facts { display: grid; gap: 1.25rem; }
.coverage-facts > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: .85rem; align-items: start; border-top: 1px solid var(--dh-rule); padding-top: 1rem; }
.coverage-icon { color: #edaa5a; font-size: .9rem; font-weight: 700; }
.coverage-facts p { margin: 0; color: var(--bs-fg-2); font-size: .93rem; line-height: 1.5; }
.coverage-facts strong { color: var(--ink); font-size: 1rem; }

.property-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.property-list { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; list-style: none; padding: 0; margin: 0; }
.property-list li { border-bottom: 1px solid var(--dh-rule); padding: .7rem 0; }
.property-list li::before { content: "+"; color: var(--electric); margin-right: .7rem; }

.faq-section { background: #EEEAE2; }
.faq-list { border-top: 1px solid var(--dh-rule); }
.faq-item { border-bottom: 1px solid var(--dh-rule); }
.faq-item summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.2rem 0; cursor: pointer; list-style: none; font-weight: 650; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { width: 1rem; height: 1rem; flex: none; position: relative; }
.faq-item summary span::before, .faq-item summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: .9rem; height: 1px; background: var(--electric); transform: translate(-50%, -50%); }
.faq-item summary span::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.faq-item[open] summary span::after { transform: translate(-50%, -50%); }
.faq-item p { max-width: 45rem; color: var(--bs-fg-2); margin: -.1rem 2rem 1.2rem 0; }

.electrical-divider {
  width: 50vw;
  height: 1px;
  margin-block: -1.25rem;
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--electric) 18%, var(--electric) 82%, transparent);
  opacity: .72;
}

.contact-section { background: #EEEAE2; }
.contact-copy .section-title { margin-bottom: 1rem; }
.contact-line { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 0; border-top: 1px solid var(--dh-rule); text-decoration: none; color: var(--ink); }
.contact-line span { color: var(--bs-fg-3); font-size: .78rem; }
.contact-line strong { font-size: 1rem; font-weight: 650; }
.contact-line:hover strong { color: var(--electric); }
.contact-languages { margin-top: 1.1rem; font-size: .87rem; color: var(--bs-fg-2); }
.contact-languages span { color: var(--electric); padding-inline: .25rem; }
.contact-form { padding: clamp(1.25rem, 3vw, 2rem); background: #EEEAE2; border: 1px solid var(--dh-rule); }
.contact-form .form-label { color: var(--ink); font-size: .85rem; font-weight: 600; }
.contact-form .form-label span { color: var(--electric); }
.contact-form .form-control, .contact-form .form-select { border-radius: 0; border-color: color-mix(in oklab, var(--ink), transparent 72%); background-color: transparent; min-height: 2.9rem; }
.contact-form textarea.form-control { min-height: 8rem; }
.contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--electric); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--electric), transparent 82%); }
.contact-form .btn-solid.theme-primary { background: var(--ink); border-color: var(--ink); color: white; }
.contact-form .btn-solid.theme-primary:hover { background: var(--electric); border-color: var(--electric); }
.form-note, .form-status { color: var(--bs-fg-3); font-size: .78rem; line-height: 1.5; }
.form-status { min-height: 1.2em; margin: .6rem 0 0; }

.site-footer { background: #EEEAE2; color: var(--ink); padding-block: 2.5rem; border-top: 1px solid var(--dh-rule); }
.site-footer .wordmark { color: var(--ink); }
.footer-logo { display: inline-flex; align-items: center; flex: none; }
.footer-logo img { display: block; width: clamp(7.5rem, 13vw, 11rem); height: 3.4rem; object-fit: contain; object-position: left center; }
.footer-inner { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items: center; }
.footer-area { margin: 0; color: var(--bs-fg-2); font-size: .88rem; }
.footer-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; padding-top: 1rem; border-top: 1px solid var(--dh-rule); }
.footer-links a { color: var(--ink); font-size: .84rem; text-decoration: none; }
.footer-links a:hover { color: var(--electric); }
.footer-copy { grid-column: 1 / -1; color: var(--bs-fg-3); font-size: .75rem; margin: 0; }

@media (width >= 768px) {
  .footer-logo img { width: clamp(9rem, 15vw, 13rem); height: 4rem; }
}

.legal-head { padding-block: clamp(3.5rem, 8vw, 6rem) 3rem; border-bottom: 1px solid var(--dh-rule); }
.legal-head .container { position: relative; }
.legal-head-mark { color: var(--electric); padding-inline: .4rem; }
.legal-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 7vw, 6rem); font-weight: 500; line-height: 1; }
.legal-lede { max-width: 38rem; margin: 1.25rem 0 0; color: var(--bs-fg-2); font-size: 1.05rem; line-height: 1.6; }
.legal-content { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal-notice { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; align-items: start; padding: 1.15rem 1.25rem; border-left: 3px solid var(--electric); background: color-mix(in oklab, var(--electric), var(--bs-bg-body) 94%); }
.legal-notice-index { padding-top: .2rem; color: var(--electric); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.legal-notice p { margin: 0; color: var(--ink); font-size: .93rem; line-height: 1.6; }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, .42fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.legal-block + .legal-block { margin-top: 3rem; }
.legal-block h2, .legal-aside h2 { margin: 0 0 1.15rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 500; }
.legal-data { margin: 0; border-top: 1px solid var(--dh-rule); }
.legal-data > div { display: grid; grid-template-columns: minmax(12rem, .85fr) minmax(0, 1.15fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--dh-rule); }
.legal-data dt { color: var(--bs-fg-3); font-size: .88rem; font-weight: 400; }
.legal-data dd { margin: 0; color: var(--ink); font-size: .92rem; overflow-wrap: anywhere; }
.legal-data a { color: inherit; text-decoration-color: color-mix(in oklab, var(--electric), transparent 45%); text-underline-offset: .2em; }
.legal-data a:hover { color: var(--electric); }
.legal-missing { color: var(--electric) !important; font-style: italic; }
.legal-aside { position: sticky; top: 6rem; padding: 1.5rem; border-top: 3px solid var(--electric); background: var(--bs-bg-2); }
.legal-aside-symbol { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 1.3rem; border: 1px solid var(--electric); border-radius: 50%; color: var(--electric); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
.legal-aside h2 { font-size: 1.55rem; }
.legal-aside > p:not(.anno) { color: var(--bs-fg-2); font-size: .9rem; line-height: 1.65; }
.legal-contact-link { display: inline-flex; gap: .65rem; align-items: center; margin-top: .35rem; color: var(--electric); font-size: .9rem; font-weight: 650; text-decoration: none; }
.legal-contact-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.legal-updated { max-width: 48rem; margin: 3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--dh-rule); color: var(--bs-fg-3); font-size: .8rem; line-height: 1.6; }
main h1,
main h2 {
  position: relative;
  padding-inline-start: 1em;
}
main h1::before,
main h2::before {
  content: "";
  position: absolute;
  inset: .14em auto auto 0;
  width: .8em;
  height: .8em;
  background: url("../../img/villanylampa.png") center / contain no-repeat;
}
@media (width <= 767.98px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .legal-notice { grid-template-columns: 1fr; gap: .45rem; }
  .legal-data > div { grid-template-columns: 1fr; gap: .3rem; }
}

.photo-carousel-section { padding-top: 0; padding-bottom: 0; }
#services { padding-top: 1.5rem; }
.photo-carousel { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 8; }
.carousel-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s ease; }
.carousel-slide.is-active { opacity: 1; visibility: visible; }
.carousel-slide[hidden] { display: none; }
.carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel-arrow { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgb(255 255 255 / 70%); background: rgb(18 38 42 / 68%); color: #fff; font-size: 1.5rem; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.carousel-arrow:hover { background: var(--electric); border-color: var(--electric); }
.carousel-previous { left: clamp(.75rem, 2vw, 1.5rem); }
.carousel-next { right: clamp(.75rem, 2vw, 1.5rem); }
.carousel-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (width <= 767.98px) {
  .photo-carousel { aspect-ratio: 4 / 3; }
  .carousel-arrow { width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-slide { transition: none; }
}

.plate-inner { animation: hero-enter .65s ease-out both; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@media (width <= 767.98px) {
  .plate { min-height: 42rem; padding-top: 4.5rem; }
  .plate::after { background: linear-gradient(90deg, rgb(12 34 39 / 84%), rgb(12 34 39 / 45%)); }
  .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
  .section-heading, .property-inner { align-items: start; grid-template-columns: 1fr; flex-direction: column; }
  .service-detail { padding-left: 0; padding-right: 0; }
  .service-detail ul { grid-template-columns: 1fr; }
  .coverage-inner { grid-template-columns: 1fr; gap: 2rem; }
  .property-list { gap: .25rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .plate-inner { animation: none; }
  .service-plus::after, .faq-item summary span::after { transition: none; }
}