/* ══ tokens ═══════════════════════════════════════════════ */
:root{
  --indigo:#071233;
  --cobalt:#1b4ce0;
  --cobalt-deep:#0d2a8a;
  --glaze:#00d8ff;
  --gold:#ffb13b;
  --pink:#ff4d8d;
  --ceramic:#f4f7ff;
  --ceramic-2:#e6ecff;
  --ink:#0a1b4a;
  --ink-soft:#4a5a8c;

  --face:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --pad:clamp(20px,5vw,72px);
  --gap:clamp(72px,10vh,132px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ceramic);
  color:var(--ink);
  font:400 clamp(15.5px,1.05vw,17.5px)/1.62 var(--face);
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dt,dd,ul,figure{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--cobalt);color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ══ language: two small tiles ════════════════════════════ */
.switch{
  position:fixed;top:0;right:0;z-index:40;
  display:flex;gap:6px;
  padding:clamp(14px,2.4vw,26px) var(--pad);
}
.switch__tile{
  appearance:none;cursor:pointer;
  width:44px;height:44px;
  border:1px solid rgba(244,247,255,.42);
  background:rgba(7,18,51,.42);
  backdrop-filter:blur(8px);
  color:#dfe7ff;
  font:700 12px/1 var(--face);
  letter-spacing:.08em;
  border-radius:3px;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.switch__tile:hover{transform:translateY(-2px)}
.switch__tile.is-on{
  background:var(--gold);
  border-color:var(--gold);
  color:#3a2200;
  box-shadow:0 6px 22px rgba(255,177,59,.5);
}

/* ══ hero ═════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:clamp(92px,13vh,150px) var(--pad) clamp(80px,11vh,130px);
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,#123cb8 0%,#0a1f5e 46%,var(--indigo) 100%);
  isolation:isolate;
}
#mosaic{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
}
.hero__wash{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 40% at 50% 52%,rgba(7,18,51,.74),rgba(7,18,51,0) 72%),
    radial-gradient(60% 40% at 88% 8%,rgba(0,216,255,.2),transparent 70%),
    radial-gradient(50% 40% at 6% 92%,rgba(255,77,141,.2),transparent 70%);
}

.hero__inner{position:relative;max-width:min(1000px,100%)}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.8rem;letter-spacing:.03em;
  color:#bcd0ff;
  margin-bottom:clamp(18px,2.8vh,28px);
  animation:up .9s .05s both cubic-bezier(.2,.8,.2,1);
}
.eyebrow::before,.eyebrow::after{
  content:"";width:22px;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(255,177,59,0));
}
.eyebrow::after{transform:scaleX(-1)}

/* the plaque — a ceramic street sign */
.plaque{
  position:relative;
  display:inline-block;
  padding:clamp(20px,3.6vw,40px) clamp(24px,5vw,68px);
  background:linear-gradient(168deg,#ffffff,#eaf0ff 62%,#dde6ff);
  border-radius:5px;
  box-shadow:
    0 0 0 1px rgba(10,27,74,.1),
    inset 0 0 0 3px rgba(244,247,255,.9),
    inset 0 0 0 4px var(--gold),
    inset 0 0 0 6px rgba(255,255,255,.85),
    0 26px 60px -22px rgba(0,20,90,.75),
    0 2px 0 rgba(255,255,255,.6);
  overflow:hidden;
  animation:set 1.1s .12s both cubic-bezier(.16,.9,.2,1);
}
.plaque__name{
  position:relative;z-index:2;
  font-size:clamp(1.6rem,6.6vw,4.4rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:.012em;
  color:var(--cobalt-deep);
  text-wrap:balance;
}
.plaque__gloss{
  position:absolute;top:-60%;bottom:-60%;left:-40%;
  width:34%;
  z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));
  transform:rotate(14deg);
  animation:sheen 8s 1.4s ease-in-out infinite;
}
@keyframes sheen{0%{left:-45%}35%,100%{left:135%}}
@keyframes set{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.lead{
  max-width:50ch;
  margin:clamp(26px,4vh,40px) auto 0;
  color:#d8e2ff;
  font-size:clamp(1rem,1.4vw,1.2rem);
  animation:up .9s .55s both cubic-bezier(.2,.8,.2,1);
}
.chips{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  margin-top:clamp(24px,3.6vh,36px);
  animation:up .9s .72s both cubic-bezier(.2,.8,.2,1);
}
.chips li{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.82rem;
  color:#e8eeff;
  padding:0 clamp(6px,1vw,14px);
}
.chips li::before{
  content:"";
  width:7px;height:7px;
  background:var(--gold);
  transform:rotate(45deg);
  box-shadow:0 0 10px rgba(255,177,59,.8);
}
.chips li:nth-child(2)::before{background:var(--glaze);box-shadow:0 0 10px rgba(0,216,255,.8)}
.chips li:nth-child(3)::before{background:var(--pink);box-shadow:0 0 10px rgba(255,77,141,.8)}
.cue{
  position:absolute;bottom:clamp(18px,3vh,32px);left:50%;
  transform:translateX(-50%);
  font-size:.7rem;letter-spacing:.12em;
  color:#8fa5dd;
  animation:up .9s .95s both ease;
}
.cue span::after{
  content:"";display:block;
  width:1px;height:26px;margin:9px auto 0;
  background:linear-gradient(180deg,var(--gold),transparent);
  animation:fall 2.4s ease-in-out infinite;
}
@keyframes fall{0%,100%{opacity:.3;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}

/* ══ calçada wave divider ═════════════════════════════════ */
.calcada{
  position:relative;
  height:clamp(46px,7vw,86px);
  background:var(--indigo);
  overflow:hidden;
}
.calcada i{
  position:absolute;inset:0;
  background-repeat:repeat-x;
  background-size:auto 100%;
  animation:roll 26s linear infinite;
}
.calcada i:nth-child(1){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='86' viewBox='0 0 240 86'%3E%3Cpath d='M-10 62 C 30 62 40 20 80 20 S 130 62 170 62 S 220 20 260 20' fill='none' stroke='%231b4ce0' stroke-width='16'/%3E%3C/svg%3E");
  opacity:.85;
}
.calcada i:nth-child(2){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='86' viewBox='0 0 240 86'%3E%3Cpath d='M-10 44 C 30 44 40 4 80 4 S 130 44 170 44 S 220 4 260 4' fill='none' stroke='%2300d8ff' stroke-width='6'/%3E%3C/svg%3E");
  opacity:.55;animation-duration:19s;animation-direction:reverse;
}
.calcada i:nth-child(3){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='86' viewBox='0 0 240 86'%3E%3Cpath d='M-10 80 C 30 80 40 40 80 40 S 130 80 170 80 S 220 40 260 40' fill='none' stroke='%23ffb13b' stroke-width='4'/%3E%3C/svg%3E");
  opacity:.65;animation-duration:33s;
}
@keyframes roll{to{background-position:-240px 0}}
.calcada--flip{transform:scaleY(-1)}

/* ══ ceramic body ═════════════════════════════════════════ */
.page{
  position:relative;
  background:
    radial-gradient(60% 40% at 88% 4%,rgba(27,76,224,.09),transparent 70%),
    radial-gradient(50% 40% at 4% 62%,rgba(255,77,141,.08),transparent 70%),
    var(--ceramic);
}
.hold{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.block{padding-block:var(--gap)}

.h2{
  font-size:clamp(1.8rem,4.2vw,3.05rem);
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.08;
  max-width:24ch;
  margin-bottom:clamp(24px,3.6vh,42px);
  color:var(--cobalt-deep);
}
.h2::after{
  content:"";display:block;
  width:64px;height:6px;
  margin-top:clamp(16px,2.2vh,22px);
  background:
    linear-gradient(90deg,var(--cobalt) 0 33%,var(--glaze) 33% 66%,var(--gold) 66% 100%);
  border-radius:1px;
}
.prose{display:grid;gap:1.05em;max-width:50ch;color:var(--ink-soft)}

/* ── craft + motif ── */
.block--craft{display:grid;gap:clamp(34px,5vw,72px);align-items:center}
@media (min-width:920px){
  .block--craft{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.motif{max-width:400px;margin-inline:auto;width:100%}
.motif svg{width:100%;height:auto;overflow:visible}
.motif__spin{transform-box:view-box;transform-origin:50% 50%;animation:turn 44s linear infinite}
.motif__frame{fill:none;stroke:rgba(27,76,224,.3);stroke-width:2}
.motif__arc{
  fill:none;stroke:url(#glaze);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:150 46;
  animation:trace 9s linear infinite;
}
.motif__quart{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;opacity:.9}
.motif__core circle{fill:rgba(27,76,224,.07);stroke:rgba(27,76,224,.4);stroke-width:2}
.motif__core path{
  fill:none;stroke:var(--pink);stroke-width:3;
  stroke-dasharray:40 250;
  animation:trace 6s linear infinite reverse;
}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes trace{to{stroke-dashoffset:-196}}

/* ── tiles ── */
.tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px);
}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.tiles{grid-template-columns:1fr}}
.tile{
  position:relative;
  padding:clamp(22px,2.5vw,34px);
  background:#fff;
  border:1px solid rgba(27,76,224,.16);
  border-radius:4px;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease;
}
/* pale quarter-arc tilework sitting in the corner of every tile */
.tile::before{
  content:"";
  position:absolute;right:-34px;bottom:-34px;
  width:150px;height:150px;
  border-radius:50%;
  border:14px solid rgba(27,76,224,.11);
  transition:border-color .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);
}
.tile::after{
  content:"";
  position:absolute;left:0;top:0;
  width:100%;height:4px;
  background:linear-gradient(90deg,var(--cobalt),var(--glaze));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.tile:nth-child(3n-1)::after{background:linear-gradient(90deg,var(--glaze),var(--gold))}
.tile:nth-child(3n)::after{background:linear-gradient(90deg,var(--pink),var(--cobalt))}
.tile:hover{
  transform:translateY(-4px);
  border-color:rgba(27,76,224,.34);
  box-shadow:0 22px 44px -22px rgba(9,30,110,.5);
}
.tile:hover::before{border-color:rgba(255,177,59,.6);transform:rotate(-16deg) scale(1.06)}
.tile:hover::after{transform:scaleX(1)}
.tile h3{
  position:relative;z-index:2;
  font-size:clamp(1.04rem,1.55vw,1.22rem);
  font-weight:700;letter-spacing:-.012em;
  color:var(--cobalt-deep);
  margin-bottom:9px;
}
.tile p{position:relative;z-index:2;color:var(--ink-soft);font-size:.94rem}

/* ── arcade ── */
.arcade{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,22px);
}
@media (max-width:980px){.arcade{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.arcade{grid-template-columns:1fr}}
.arch{
  position:relative;
  padding:clamp(74px,9vw,104px) clamp(18px,2vw,26px) clamp(24px,3vw,32px);
  border-radius:999px 999px 5px 5px;
  background:linear-gradient(180deg,rgba(27,76,224,.14),rgba(27,76,224,.03) 46%,rgba(255,255,255,0));
  border:1px solid rgba(27,76,224,.2);
  overflow:hidden;
  transition:background .5s ease,border-color .5s ease;
}
.arch::before{
  content:"";
  position:absolute;left:14px;right:14px;top:14px;bottom:14px;
  border-radius:999px 999px 3px 3px;
  border:1px solid rgba(255,177,59,.55);
  border-bottom-color:transparent;
  pointer-events:none;
}
.arch::after{
  content:"";
  position:absolute;left:50%;top:clamp(26px,3.4vw,40px);
  width:clamp(26px,3vw,36px);height:clamp(26px,3vw,36px);
  transform:translateX(-50%) rotate(45deg);
  border:3px solid var(--glaze);
  border-radius:3px;
  opacity:.85;
  animation:bob 7s ease-in-out infinite;
}
.arch:nth-child(2)::after{border-color:var(--gold);animation-delay:-1.6s}
.arch:nth-child(3)::after{border-color:var(--pink);animation-delay:-3.2s}
.arch:nth-child(4)::after{border-color:var(--cobalt);animation-delay:-4.8s}
@keyframes bob{0%,100%{transform:translateX(-50%) rotate(45deg) scale(1)}50%{transform:translateX(-50%) rotate(135deg) scale(1.1)}}
.arch:hover{background:linear-gradient(180deg,rgba(27,76,224,.22),rgba(0,216,255,.06) 50%,rgba(255,255,255,0));border-color:rgba(27,76,224,.4)}
.arch h3{
  font-size:clamp(1rem,1.5vw,1.14rem);
  font-weight:700;color:var(--cobalt-deep);
  margin-bottom:8px;
}
.arch p{color:var(--ink-soft);font-size:.92rem}

/* ══ contact ══════════════════════════════════════════════ */
.closing{
  background:var(--indigo);
  padding-block:clamp(56px,8vh,104px);
}
.panel{
  position:relative;
  padding:clamp(26px,4vw,56px);
  border-radius:5px;
  background:
    radial-gradient(90% 120% at 8% 0%,rgba(27,76,224,.55),rgba(7,18,51,.2)),
    linear-gradient(160deg,#0e2470,#0a1a4d 60%,#071233);
  box-shadow:
    inset 0 0 0 2px rgba(255,177,59,.75),
    inset 0 0 0 5px rgba(244,247,255,.06),
    0 30px 70px -30px rgba(0,10,60,.9);
  overflow:hidden;
}
.panel::after{
  content:"";
  position:absolute;right:-90px;bottom:-90px;
  width:280px;height:280px;border-radius:50%;
  border:26px solid rgba(0,216,255,.12);
  pointer-events:none;
}
.panel__h{
  font-size:clamp(1.5rem,3.2vw,2.3rem);
  font-weight:800;letter-spacing:-.028em;
  color:#fff;margin-bottom:6px;
}
.panel__entity{
  position:relative;z-index:2;
  color:var(--gold);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.02em;
  margin-bottom:clamp(20px,3vw,32px);
}
.contact{
  position:relative;z-index:2;
  display:grid;gap:1px;
  background:rgba(233,239,255,.16);
  border:1px solid rgba(233,239,255,.16);
  border-radius:3px;
  overflow:hidden;
}
@media (min-width:560px){
  .contact{grid-template-columns:1fr 1fr}
  /* address and email get the extra width, so neither has to wrap */
  .contact__row:first-child,
  .contact__row:last-child{grid-column:span 2}
}
@media (min-width:980px){
  .contact{grid-template-columns:repeat(3,1fr)}
  .contact__row:first-child{grid-column:span 2}
  .contact__row:last-child{grid-column:span 3}
}
.contact__row{padding:clamp(14px,1.6vw,20px);background:rgba(7,18,51,.72)}
.contact dt{
  font-size:.72rem;letter-spacing:.05em;
  color:#93a8de;margin-bottom:6px;
}
.contact dd{
  margin:0;font-size:1rem;font-weight:500;color:#f2f6ff;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

/* on narrow screens the address holds one line at a slightly smaller size */
@media (max-width:559px){
  .contact__row:first-child dd{
    white-space:nowrap;
    font-size:.9rem;
    letter-spacing:-.004em;
  }
}

/* ══ foot ═════════════════════════════════════════════════ */
.foot{
  background:var(--indigo);
  color:#8ea3d8;
  font-size:.76rem;
  text-align:center;
  padding:22px var(--pad) 30px;
  border-top:1px solid rgba(233,239,255,.1);
}

/* ══ reveal + motion prefs ════════════════════════════════ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.75,.2,1)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .plaque,.plaque__gloss,.eyebrow,.lead,.chips,.cue,.cue span::after,
  .calcada i,.motif__spin,.motif__arc,.motif__core path,.arch::after{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .tile,.arch{transition:none}
}