/* UTWÖ — shared styles for the inner pages (Wedding, Corporate, Production, About, Contact, legal) */
@font-face{font-family:"UTWO Caps";src:url("fonts/copperplate-cc.woff") format("woff");font-weight:400;font-display:swap}
:root{
  color-scheme: light;
  --paper:#ffffff;
  --ink:#141414;
  --ink-soft:#3b3b3b;
  --stone:#0d0d0d;
  --on-photo:#f6f5f2;
  --rule:#141414;
  --caps:"UTWO Caps","Copperplate Gothic","Copperplate",ui-sans-serif,system-ui,sans-serif;
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --track-caps:.34em;
  --gutter:clamp(16px,5vw,72px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.03em;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.caps{font-family:var(--caps);text-transform:uppercase;letter-spacing:var(--track-caps);font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- NAV (open, current page in bold; same positions as the home page) ---------- */
.nav{position:absolute;z-index:20;top:calc(env(safe-area-inset-top,0px) + clamp(22px,6.1vw,96px));left:0;right:0;height:0;color:var(--nav-color,var(--on-photo))}
.nav-group{display:contents}
.nav-item{position:absolute;top:0;left:var(--x);transform:translate(-50%,-50%);font-size:clamp(13px,1.12vw,19px);letter-spacing:.03em;white-space:nowrap;transition:opacity .3s}
.nav-item:hover{opacity:.6}
.nav-item[aria-current="page"]{font-weight:700}
.left .nav-item:nth-child(1){--x:13.9%}.left .nav-item:nth-child(2){--x:20%}.left .nav-item:nth-child(3){--x:26.8%}
.right .nav-item:nth-child(1){--x:70.8%}.right .nav-item:nth-child(2){--x:79.8%}.right .nav-item:nth-child(3){--x:88.4%}
.bracket{display:inline-flex;gap:clamp(12px,1.2vw,20px)}
.bracket::before{content:"[";font-weight:300}.bracket::after{content:"]";font-weight:300}
.logo-link{position:absolute;top:0;left:49.3%;transform:translate(-50%,-50%);z-index:2}
.logo{display:block;width:clamp(70px,6.6vw,110px)}
.menu-btn{display:none}

/* ---------- typewriter ---------- */
.typing .ch{visibility:hidden}
.typing .ch.on{visibility:visible}
.typing .ch.cur{position:relative}
.typing .ch.cur::after{content:"";position:absolute;left:100%;top:-.1em;margin-left:.1em;width:1px;height:1.2em;background:currentColor;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- CTA (identical on every page) ---------- */
.cta{position:relative;padding:clamp(40px,6vw,70px) var(--gutter) clamp(90px,12vw,150px);min-height:clamp(520px,52vw,720px);display:grid;place-items:center;text-align:center;background:var(--paper);color:var(--ink)}
.cta-copy{position:relative;z-index:2;display:grid;gap:clamp(22px,2.4vw,30px);justify-items:center}
.cta h2{margin:0;font-size:clamp(11px,1vw,13px);line-height:2.1;font-weight:500}
.quote{font-size:clamp(18px,1.45vw,20px);display:inline-flex;gap:clamp(14px,1.6vw,22px);align-items:center}
.quote span.u{border-bottom:1px solid var(--rule);padding-bottom:3px;transition:letter-spacing .5s cubic-bezier(.2,.7,.2,1)}
.quote:hover span.u{letter-spacing:.06em}
.quote::before{content:"[";font-weight:300}.quote::after{content:"]";font-weight:300}
.float{position:absolute;z-index:1;margin:0}
.float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s cubic-bezier(.4,0,.2,1)}
.float img.alt{opacity:0}
.float.swap:hover img.alt,.float.swap.tapped img.alt{opacity:1}
.f1{left:8.8%;top:2%;width:15.3%;aspect-ratio:87/111}
.f2{right:7.5%;top:2%;width:15.3%;aspect-ratio:87/111}
.f3{left:24%;bottom:6%;width:12%;aspect-ratio:68/105}
.f4{right:16.3%;bottom:9%;width:21%;aspect-ratio:120/98}

/* ---------- FOOTER ---------- */
.foot{padding:clamp(30px,5vw,60px) var(--gutter) clamp(40px,6vw,70px);display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;background:var(--paper);color:var(--ink)}
.foot-logo{width:clamp(110px,12vw,150px)}
.foot-cols{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(28px,6vw,90px);font-size:15.5px;line-height:1.75;margin-right:clamp(0px,4vw,60px)}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols a{transition:opacity .3s}.foot-cols a:hover{opacity:.55}
.social{display:flex;gap:8px;margin-top:8px}
.social svg{width:15px;height:15px}

/* ---------- inquiry + footer: exact PDF geometry on tablets and desktops ---------- */
@media (min-width:700px){
  .cta{height:56.2vw;min-height:0;padding:0;display:block}
  .cta-copy{position:absolute;left:0;right:0;top:21.2vw;gap:2.1vw}
  .cta h2{font-size:clamp(10px,1vw,15px);line-height:1.98vw}
  .quote{font-size:clamp(14px,1.45vw,22px)}
  .f1{left:8.78%;top:5.62vw;width:15.3vw;height:19.25vw;aspect-ratio:auto}
  .f2{left:77.4%;right:auto;top:5.62vw;width:15.3vw;height:19.25vw;aspect-ratio:auto}
  .f3{left:24%;top:35vw;bottom:auto;width:12vw;height:18vw;aspect-ratio:auto}
  .f4{left:62.9%;right:auto;top:35.02vw;bottom:auto;width:21.08vw;height:16.84vw;aspect-ratio:auto}
  .foot{position:relative;display:block;height:20.7vw;padding:0}
  .foot-logo{position:absolute;left:6.74%;top:9.2vw;width:11.8vw}
  .foot-cols{position:absolute;left:53.3%;top:7.55vw;right:0;display:block;margin:0;font-size:clamp(12px,1.06vw,17px);line-height:1.61vw;letter-spacing:.025em;color:#1e1e1e}
  .foot-cols > *{position:absolute;top:0}
  .foot-cols > :nth-child(1){left:0}.foot-cols > :nth-child(2){left:11.85vw}.foot-cols > :nth-child(3){left:28.16vw}
  .social{margin-top:1.05vw;gap:.55vw}
  .social svg{width:max(15px,1.45vw);height:max(15px,1.45vw)}
}

/* ---------- PHONE (menu is handled by site.js below 1024px) ---------- */
@media (max-width:699px){
  .cta{min-height:640px}
  .f1{left:4%;top:0;width:28%}.f2{right:4%;top:4%;width:26%}
  .f3{left:8%;bottom:2%;width:22%}.f4{right:6%;bottom:4%;width:36%}
  .foot{grid-template-columns:1fr;gap:34px}
  .foot-cols{grid-template-columns:repeat(2,auto);justify-content:start;margin:0}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
}

/* ---------- PHONES: inquiry section + footer (from the mobile mock-up) ---------- */
.cta-strip{display:contents}
@media (max-width:699px){
  .cta{height:auto;min-height:0;padding:76px 0 86px;display:block;place-items:normal}
  .cta-copy{position:static;padding:0 22px;margin:0 0 58px;gap:30px}
  .cta h2{font-size:11px;line-height:2.15}
  .quote{font-size:21px}
  .cta-strip{display:flex;gap:4.5vw;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:22px}
  .cta-strip::-webkit-scrollbar{display:none}
  .cta-strip .float{position:relative;inset:auto;flex:none;height:72vw;aspect-ratio:auto;scroll-snap-align:start}
  .cta-strip .f1{order:1;width:57vw}.cta-strip .f3{order:2;width:48vw}.cta-strip .f2{order:3;width:57vw}.cta-strip .f4{order:4;width:90vw}
  .foot{display:block;height:auto;padding:46px 22px 64px;border-top:1px solid #e8e8e8}
  .foot-logo{position:static;width:36vw;max-width:180px;margin:0 0 32px}
  .foot-cols{position:static;display:grid;grid-template-columns:auto auto auto;justify-content:space-between;gap:0 4vw;font-size:clamp(14px,3.8vw,16px);line-height:2.3;letter-spacing:.015em;margin:0}
  .foot-cols a,.foot-cols div{white-space:nowrap}
  .foot-cols > *{position:static}
  .foot-cols > :nth-child(3){justify-self:end}
  .social{gap:12px;margin-top:6px}
  .social a{width:40px;height:40px;border-radius:50%;border:1px solid #ececec;box-shadow:0 2px 8px rgba(0,0,0,.05);display:grid;place-items:center}
  .social svg{width:16px;height:16px}
}

/* footer location (SEO + brand) v2 */
.foot-brand{display:block}
.foot-loc{margin:.55em 0 0;font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:.01em;font-size:clamp(14px,1.15vw,19px);line-height:1.2;color:#1e1e1e;text-align:left}
@media (min-width:700px){ .foot-brand{position:absolute;left:6.74%;top:9.2vw} .foot-brand .foot-logo{position:static;display:block} }
@media (max-width:699px){ .foot-brand{margin:0 0 32px} .foot-brand .foot-logo{margin:0;display:block} .foot-loc{font-size:17px;margin-top:10px} }