/* Footer — port of the component hub's prompt-wd-footer-newsletter.md
   (white-desert.com Footer), re-themed to Breq Studio: ink background, --text,
   --accent, WhatsApp green on the third button. Layout, type scale, spacing,
   hover colour-swap and .3s cubic-bezier(.5,1,.89,1) motion kept 1:1.
   Removed (no backend / nothing real to show): film button, newsletter panel +
   validator, award badges, quote line. Wordmark = the site's own image.
   Every custom property is scoped to .footer-component so nothing leaks.
   ponytail: the source scales the whole page with body{font-size:1.11vw}; here
   only the footer does, floored at 14px so 768px tablets stay readable. */
.footer-component{
  /* size scale: em on desktop (scales with the footer's font-size), rem on phones */
  --size-03125:.3125em; --size-0625:.625em; --size-05:.5em; --size-075:.75em; --size-0875:.875em; --size-1:1em;
  --size-125:1.25em; --size-1875:1.875em; --size-2:2em; --size-25:2.5em; --size-3:3em;
  --size-375:3.75em; --size-625:6.25em; --size-6875:6.875em; --size-12-5:12.5em;
  --space-1:.35em; --space-2:.75em; --space-3:1.1em;
  --radius-0125:.125em; --radius-0625:.625em;
  --ease-wd:cubic-bezier(.5,1,.89,1);
  --transition-out:color .3s var(--ease-wd), background-color .3s var(--ease-wd), opacity .3s var(--ease-wd), transform .3s var(--ease-wd); /* explicit, not `all` */
  --wa-green:#25D366;
  position:relative; z-index:1; background:var(--ink); color:var(--text);
  border-top:1px solid var(--divider);
  font-family:var(--font-copy); font-size:max(14px, 1.11111vw); line-height:1.2;
}
@media (min-width:1560px){ .footer-component{ font-size:17.3333px; } }
@media (max-width:767px){
  .footer-component{
    font-size:16px;
    --size-03125:.3125rem; --size-0625:.625rem; --size-05:.5rem; --size-075:.75rem; --size-0875:.875rem; --size-1:1rem;
    --size-125:1.25rem; --size-1875:1.875rem; --size-2:2rem; --size-25:2.5rem; --size-3:3rem;
    --size-375:3.75rem; --size-625:6.25rem; --size-6875:6.875rem; --size-12-5:12.5rem;
    --radius-0125:.125rem; --radius-0625:.625rem;
  }
}
.footer-component *{ margin:0; padding:0; }
.footer-component ul{ list-style:none; }
.footer-component a{ color:inherit; text-decoration:none; }
.footer-component .container{ padding-inline:var(--size-125); width:100%; margin-inline:auto; }
.footer-component .container-large{ width:100%; padding-inline:var(--edge); } /* 2026-10-12: on the page edge like every section */
.footer-component .u-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-2); row-gap:1.5em; width:100%; }
.footer-component .col-3{ grid-column-end:span 3; }
.footer-component .col-4{ grid-column-end:span 4; }
.footer-component .col-6{ grid-column-end:span 6; }
.footer-component .col-8{ grid-column-end:span 8; }
.footer-component .offset-8{ grid-column-start:9; }
.footer-component .t-body{ font:500 var(--size-0875)/1.5 var(--font-copy); }
.footer-component .t-body_sm{ font:500 var(--size-075)/1.2 var(--font-copy); }
.footer-component .t-label{ font:500 var(--size-1)/1.2 var(--font-copy); color:var(--text); }
.footer-component .icon{ display:inline-block; vertical-align:middle; }
.footer-component .icon svg{ width:100%; height:100%; display:block; }

/* buttons */
.footer-component .btn{
  --btn-border:.03125rem solid rgba(255,255,255,.2);
  display:flex; justify-content:center; align-items:center; gap:var(--space-3);
  cursor:pointer; transition:var(--transition-out);
}
.footer-component .btn-text{ font:500 var(--size-0875)/1.5 var(--font-copy); white-space:nowrap; transition:var(--transition-out); }
.footer-component .btn-icon{ width:var(--size-0875); position:relative; }
.footer-component .btn-inner{ display:flex; align-items:center; position:relative; }
.footer-component .btn-large{
  --btn-fs:clamp(1.4rem, 1.05rem + .5vw, 1.75rem);
  justify-content:flex-start; align-items:flex-end; padding:1.1rem 1.25rem;
  width:100%; min-height:var(--size-6875); border-radius:var(--radius-0125);
  background-color:var(--panel); color:var(--text); border:var(--btn-border);
  position:relative; overflow:hidden;
}
.footer-component .btn-large .btn-text{ font-size:var(--btn-fs); line-height:1.15; }
.footer-component .btn-large .btn-icon{
  font-size:var(--btn-fs); line-height:1; width:auto; margin-left:.35em;
  opacity:0; transition:var(--transition-out); display:flex; justify-content:center; align-items:center;
  position:absolute; left:100%; transform:scale(0);
}
@media (hover:hover) and (pointer:fine){
  .footer-component .btn-large:hover{ border-radius:var(--radius-0625); background-color:#fff; color:var(--accent); }
  .footer-component .btn-large:hover .btn-text{ transform:translate(-.5rem); }
  .footer-component .btn-large:hover .btn-icon{ opacity:1; transform:scale(1); }
  .footer-component .btn-large.hover-accent:hover{ background-color:var(--accent); color:var(--ink); }
  .footer-component .btn-large.hover-wa:hover{ background-color:var(--wa-green); color:var(--ink); }
}
@media (max-width:767px){
  .footer-component .btn-large{ min-height:var(--size-625); --btn-fs:1.15rem; padding:1rem; }
  .footer-component .btn{ transition:none; }
}

/* layout */
.footer{
  display:flex; flex-flow:column; justify-content:space-between; row-gap:var(--size-12-5);
  min-height:100svh; padding-block:10px; position:relative; z-index:3;
}
.footer-col{ padding-block:var(--size-0625); }
.footer-col_inner_col{ padding-inline:0; }
.footer-menu_layout{ display:flex; flex-flow:column; row-gap:var(--size-1); }
.footer-menu_item{ display:flex; flex-flow:column; row-gap:var(--size-05); }
.footer-menu_item ul{ display:flex; flex-flow:column; row-gap:.125em; color:var(--muted); }
.footer-link{ transition:var(--transition-out); }
@media (hover:hover) and (pointer:fine){ .footer-link:hover{ color:var(--text); } }
.footer-cta_layout{ display:flex; flex-flow:column; row-gap:var(--size-0625); width:calc(100% - var(--size-0625)); position:relative; }
.footer-cta_grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--size-0625); }

/* bottom: wordmark + info line */
.footer-bottom_layout{ display:flex; flex-direction:column; row-gap:var(--size-125); }
.footer-bottom_logo{ width:100%; text-align:center; }
.footer-bottom_logo img{ width:100%; height:auto; display:block; }
.footer-info_layout{
  position:relative; width:100%; max-width:calc(100% - (var(--space-2) * 2)); margin:auto;
  padding:var(--size-125) var(--size-0625); align-items:center; color:var(--muted);
}
.footer-info_layout::before, .footer-info_layout::after{
  content:""; position:absolute; left:0; width:100%; height:.5px; background:rgba(233,231,226,.14);
}
.footer-info_layout::before{ top:0; }
.footer-info_layout::after{ bottom:0; }
.footer-bot_border{ position:absolute; top:0; width:.5px; height:100%; background:rgba(233,231,226,.14); }
.footer-bot_border.is-left{ left:0; }
.footer-bot_border.is-right{ right:0; }
.footer-info_left, .footer-info_right{ display:flex; align-items:center; column-gap:var(--size-125); }
.footer-info_right{ justify-content:flex-end; text-align:right; }
.footer-info_right .t-body_sm, .footer-info_left .t-body_sm{ transition:var(--transition-out); }
@media (hover:hover) and (pointer:fine){ .footer-info_right a.t-body_sm:hover{ color:var(--text); } }

@media (max-width:767px){
  .footer{ row-gap:.25rem; }
  .footer-component .u-grid{ display:flex; flex-direction:column; row-gap:var(--size-1875); }
  .footer-col_inner_col{ padding-inline:0; }
  .footer-col_inner_col.is-spacer{ display:none; }
  .footer-col_inner.u-grid{ align-items:flex-start; }
  .footer-menu_layout{ row-gap:var(--size-1875); }
  .footer-cta_layout{ width:100%; }
  .footer-col{ padding-block:var(--size-25) var(--size-1); }
  .footer-bottom{ padding-top:var(--size-1); }
  .footer-bottom_layout{ row-gap:var(--size-2); }
  .footer-info_layout .icon{ display:none; }
  .footer-info_contain.container.u-grid{ align-items:center; row-gap:1rem; }
  .footer-info_left, .footer-info_right{ justify-content:center; }
}