/* Reusable pieces: buttons, cards, fields, media tiles, lightbox, states. */

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:0 var(--s-5);
  font-size:var(--t-label-nav);font-weight:var(--weight-label);letter-spacing:var(--track-nav);text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--radius);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn--primary{background:var(--crimson);color:var(--on-dark)}
.btn--primary:hover{background:var(--crimson-deep)}
.btn--outline{border-color:var(--crimson);color:var(--crimson)}
.btn--outline:hover{background:var(--crimson);color:var(--on-dark)}
.btn--on-dark{border-color:rgba(251,247,242,.5);color:var(--on-dark)}
.btn--on-dark:hover{background:var(--on-dark);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn--ghost{background:transparent;color:var(--on-dark);border-color:rgba(247,248,250,.6)}
.btn--ghost:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:transparent;color:var(--on-dark);border-color:#fff}

/* ---- Floating WhatsApp button ----
   Plain round button drawn in CSS. Hidden at the top of the page so it never
   covers the hero; fades in once you scroll past it. */
.wa-fab{
  position:fixed;right:var(--s-4);bottom:var(--s-4);z-index:60;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:#25d366;color:#fff;
  box-shadow:0 4px 14px rgba(12,14,18,.28);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.94);
  transition:opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             visibility var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.wa-fab.is-visible{opacity:1;visibility:visible;transform:none}
.wa-fab:hover{box-shadow:0 8px 22px rgba(12,14,18,.36)}
.wa-fab svg{width:30px;height:30px;fill:currentColor}


/* ---- Brand lockup (crest + wordmark) — used on both pages ---- */
.brand{display:flex;align-items:center;gap:var(--s-3)}
.brand img{height:46px;width:auto}
.brand__text{
  display:none;
  font-family:var(--font-display);font-size:1.25rem;
  line-height:1.05;letter-spacing:.02em;color:var(--ink);
}
.brand__text span{
  display:none;font-family:var(--font-body);font-size:.5rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--crimson);margin-top:3px;
}
@media (min-width:480px){ .brand__text{display:block} }
@media (min-width:560px){ .brand__text span{display:block} }

/* ---- Inline icon (sized to the button's text) ---- */
.icon{width:1.05em;height:1.05em;fill:currentColor;flex:none}

/* ---- Contact block ---- */
.contact-lines{display:flex;flex-direction:column;gap:var(--s-1);margin-bottom:var(--s-4)}
.contact-lines__phone{
  font-family:var(--font-display);font-size:1.5rem;color:var(--crimson);
}
.contact-lines span{
  font-size:var(--t-label);font-weight:var(--weight-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink-soft);
}

/* ---- Media tiles ---- */
.tile{
  display:block;width:100%;padding:0;border:0;
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--pearl);aspect-ratio:4/3;
}
.tile img,.tile__loop{width:100%;height:100%;object-fit:cover;display:block;transition:transform 300ms var(--ease)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.04)}
/* The looping tile already moves; don't also scale it on hover. */
.tile--video .play{background:rgba(20,22,26,.22)}
.tile__caption{
  position:absolute;inset:auto 0 0 0;
  padding:var(--s-5) var(--s-4) var(--s-3);
  background:linear-gradient(0deg,rgba(26,21,18,.82),transparent);
  color:var(--on-dark);font-size:var(--t-fine);font-weight:var(--weight-label);
}
.tile--video{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
@media (max-width:719px){
  .tile--video{grid-column:span 1;grid-row:span 1;aspect-ratio:16/9;height:auto}
}

.play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(26,21,18,.34);
  transition:background var(--dur) var(--ease);
}
.tile:hover .play,.tile:focus-visible .play{background:rgba(26,21,18,.48)}
.play__dot{
  width:68px;height:68px;border-radius:50%;
  background:var(--crimson);color:var(--on-dark);
  display:grid;place-items:center;font-size:1.25rem;padding-left:4px;
}

/* ---- States ---- */
.state{
  grid-column:1/-1;
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:var(--s-7) var(--s-4);text-align:center;color:var(--ink-soft);
}
.state h3{color:var(--ink);margin-bottom:var(--s-2)}
.state p{margin-inline:auto}
.state--error{border-color:var(--crimson);border-style:solid;background:var(--crimson-tint)}

/* ---- Form ---- */
.field{display:flex;flex-direction:column;gap:var(--s-1)}
.field label{font-size:var(--t-label-nav);font-weight:var(--weight-label);letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  /* width is explicit: a date input has an intrinsic size of its own and
     will not stretch to the column on a phone without being told to. */
  width:100%;min-width:0;
  min-height:48px;padding:var(--s-2) var(--s-3);
  background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease);
}
.field textarea{min-height:104px;padding-top:var(--s-3);resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-soft)}
.form__note{font-size:var(--t-fine);color:var(--ink-soft)}
.form__status{font-size:var(--t-fine);font-weight:var(--weight-label);min-height:1.5rem}
/* Live character count under the message box */
.field__count{display:block;margin-top:4px;text-align:right;font-size:var(--t-fine);color:var(--ink-soft);font-variant-numeric:tabular-nums}
/* The field the visitor has to fix */
.field input.is-wrong,.field select.is-wrong,.field textarea.is-wrong{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(124,52,64,.12)}
.form__status--ok{color:var(--sage,#66705b)}     /* sent — never the burgundy, which means a warning */
.form__status--error{color:#9a1b1b}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed;inset:0;z-index:90;
  display:none;place-items:center;
  padding:var(--s-4);
  background:rgba(16,12,10,.92);
}
.lightbox[open],.lightbox.is-open{display:grid}
.lightbox__inner{width:min(100%,1040px)}
.lightbox__inner img,.lightbox__inner iframe{
  width:100%;border-radius:var(--radius);background:#000;
}
.lightbox__inner iframe{aspect-ratio:16/9;border:0;display:block}
.lightbox__inner video{width:100%;max-height:78vh;border-radius:var(--radius);background:#000;display:block}
/* Portrait clips shouldn't stretch the full width of a desktop screen. */
.lightbox__inner--video{width:min(100%,520px);margin-inline:auto}
.lightbox__cap{color:var(--on-dark);margin-top:var(--s-3);font-size:.9375rem}
.lightbox__close{
  position:absolute;top:var(--s-4);right:var(--s-4);
  width:48px;height:48px;color:var(--on-dark);font-size:1.5rem;
  border:1px solid rgba(251,247,242,.4);border-radius:var(--radius);
}
.lightbox__close:hover{background:rgba(251,247,242,.14)}

/* A photograph that fills its box. The image is absolutely positioned so
   the box's height always comes from the layout, never the picture's own
   shape. Works as a <figure> or as a <button> that opens the lightbox. */
.frame{
  position:relative;display:block;width:100%;margin:0;padding:0;border:0;
  overflow:hidden;background:var(--pearl);
}
.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}


/* ---- Touch targets ----
   Small icons and short links need a bigger tappable box than their ink.
   The padding is negative-margined back so nothing moves on the page. */
@media (pointer:coarse){
  .util__social a,.site-footer__social a{padding:13px;margin:-13px}
  .topbar__nav a{padding-block:12px}
  .vframe__btn,.phone__play,.phone .vframe__btn{min-width:44px;min-height:44px}
  .contact__value--link,.map-card__link,.site-footer__col a,.util__item,.contact__value--phone{padding-block:11px;margin-block:-11px;display:inline-block}
  .vframe__vol{height:24px}
}

/* A quiet hint under a field, for rules the visitor cannot guess */
.field__hint{display:block;margin-top:4px;font-size:var(--t-fine);color:var(--ink-soft)}