/* Urban Luksus — ul-royal-v1 polish layer (loads after Tailwind + ul-chrome.css).
   Unlayered rules beat Tailwind's @layer utilities, so no markup classes change.
   Ink + gold only. No new images, no copy. */
:root{
  --ul-ink:#0b0b0a; --ul-ink-2:#11110f; --ul-paper:#e9e2d4; --ul-gold:#c4a46a; --ul-gold-hi:#d4b87f;
  --ul-hair:rgba(196,164,106,.22); --ul-hair-soft:rgba(196,164,106,.12);
  --ul-pad:clamp(1.25rem,.6rem + 3.2vw,3rem);          /* page gutter 20px -> 48px */
  --ul-sec:clamp(3.25rem,2rem + 5vw,6.5rem);           /* section rhythm 52px -> 104px */
  --ul-max:76rem;                                       /* one content width for header, main, footer */
  --ul-ease:cubic-bezier(.22,.61,.36,1);
}
html{scroll-padding-top:6rem;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip;font-feature-settings:"kern","liga";text-rendering:optimizeLegibility}
::selection{background:rgba(196,164,106,.35);color:#fff}

/* ---------- one grid width + gutter everywhere ---------- */
header > .mx-auto, main .mx-auto.max-w-7xl, main .mx-auto.max-w-6xl, footer .mx-auto{
  max-width:var(--ul-max)!important; padding-left:var(--ul-pad)!important; padding-right:var(--ul-pad)!important;
}

/* ---------- header ---------- */
body > header{background:rgba(11,11,10,.92)!important;border-bottom-color:var(--ul-hair)!important}
body > header > .mx-auto{height:4.75rem!important}
@media (min-width:1024px){ body > header > .mx-auto{height:5.75rem!important} }
header a[href="/"] img, header .ul-header-mark{height:46px!important;max-height:46px!important;width:auto!important}
@media (min-width:1024px){ header a[href="/"] img, header .ul-header-mark{height:56px!important;max-height:56px!important} }
header .ul-header-word{font-size:.9rem;letter-spacing:.22em;color:var(--ul-gold)}
@media (max-width:359px){ header .ul-header-word{font-size:.78rem;letter-spacing:.16em} }
nav[aria-label="Primary"]{gap:clamp(1.1rem,1.6vw,2rem)!important}
nav[aria-label="Primary"] > a:not([href*="wa.me"]):not([href="/contact"]){
  position:relative;font-size:.74rem!important;letter-spacing:.2em!important;padding:.6rem 0;
}
nav[aria-label="Primary"] > a:not([href*="wa.me"]):not([href="/contact"])::after{
  content:"";position:absolute;left:0;right:0;bottom:.3rem;height:1px;background:var(--ul-gold);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ul-ease);
}
nav[aria-label="Primary"] > a:hover::after, nav[aria-label="Primary"] > a:focus-visible::after{transform:scaleX(1)}
nav[aria-label="Primary"] > a[href*="wa.me"], nav[aria-label="Primary"] > a[href="/contact"]{height:2.75rem!important;padding:0 1.25rem!important}
[data-slot="sheet-trigger"]{width:2.75rem!important;height:2.75rem!important;border-color:rgba(196,164,106,.45)!important;color:var(--ul-gold)!important;transition:background-color .2s}
[data-slot="sheet-trigger"][aria-expanded="true"]{background:rgba(196,164,106,.12)}

/* ---------- phone menu (vanilla script keeps its logic; this only restyles it) ---------- */
#ul-mobile-menu{
  background:rgba(11,11,10,.985)!important;border-top:1px solid var(--ul-hair-soft);border-bottom:1px solid var(--ul-hair)!important;
  padding:.5rem var(--ul-pad) 1.5rem!important;box-shadow:0 24px 40px rgba(0,0,0,.45);
}
#ul-mobile-menu:not([hidden]){animation:ulMenuIn .28s var(--ul-ease) both}
@keyframes ulMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#ul-mobile-menu > a{
  font-family:var(--font-heading),Georgia,serif!important;font-size:1.05rem!important;letter-spacing:.12em!important;
  padding:.95rem 0!important;color:rgba(233,226,212,.92)!important;border-bottom-color:var(--ul-hair-soft)!important;
  display:flex!important;align-items:center;justify-content:space-between;transition:color .2s,padding-left .25s var(--ul-ease);
}
#ul-mobile-menu > a::after{content:"";width:.45rem;height:.45rem;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);opacity:.5}
#ul-mobile-menu > a:hover, #ul-mobile-menu > a:focus-visible{color:var(--ul-gold)!important;padding-left:.35rem!important}
#ul-mobile-menu > div{margin-top:1.25rem!important;gap:.6rem!important}
#ul-mobile-menu > div > a{height:3rem!important}

/* ---------- type scale ---------- */
main h1.font-heading{font-size:clamp(2.05rem,1.35rem + 3.1vw,4rem)!important;line-height:1.1!important;letter-spacing:.015em!important;text-wrap:balance}
main h2.font-heading{font-size:clamp(1.65rem,1.2rem + 1.9vw,2.75rem)!important;line-height:1.15!important;letter-spacing:.02em!important;text-wrap:balance}
main h3.font-heading{font-size:clamp(1.12rem,1rem + .45vw,1.35rem)!important;line-height:1.3!important;letter-spacing:.03em}
main p.font-heading.text-3xl{font-size:clamp(1.4rem,1.1rem + 1.3vw,2.25rem)!important;line-height:1.25!important}
main p.text-sm, main li.text-sm, main .text-sm > p, main figcaption p{font-size:clamp(.94rem,.9rem + .15vw,1rem)!important;line-height:1.72!important}
main p.text-base, main p.sm\:text-lg{line-height:1.7!important}
main h1 + p{max-width:38rem}
main p, main li{text-wrap:pretty}
/* eyebrows: one size, one tracking */
main p.uppercase.text-gold, main span.uppercase.text-gold{font-size:.7rem!important;letter-spacing:.3em!important;font-weight:500}
/* section eyebrow gets a short gold rule */
main section > div > p.uppercase.text-gold:first-child,
main section > div > div:first-child:not(.border-t) > p.uppercase.text-gold:first-child,
main > header p.uppercase.text-gold:first-child,
main section > .relative > p.uppercase.text-gold:first-child{display:flex;align-items:center;gap:.85rem}
main section > div > p.uppercase.text-gold:first-child::before,
main section > div > div:first-child:not(.border-t) > p.uppercase.text-gold:first-child::before,
main > header p.uppercase.text-gold:first-child::before,
main section > .relative > p.uppercase.text-gold:first-child::before{content:"";width:2.25rem;height:1px;background:var(--ul-gold);opacity:.8;flex:none}

/* ---------- section rhythm ---------- */
main section > div.mx-auto, main > div.mx-auto, main > header > div.mx-auto{padding-top:var(--ul-sec)!important;padding-bottom:var(--ul-sec)!important}
main section[aria-label="Practice"] > div.mx-auto{padding-top:clamp(2rem,1.5rem + 2vw,3rem)!important;padding-bottom:clamp(2rem,1.5rem + 2vw,3rem)!important;column-gap:clamp(1.5rem,3vw,3rem)!important;row-gap:1.5rem!important}
main section[aria-label="How to start"] > div.mx-auto{padding-top:clamp(1.75rem,1.4rem + 1.5vw,2.5rem)!important;padding-bottom:clamp(1.75rem,1.4rem + 1.5vw,2.5rem)!important}
main section[aria-label="How to start"]{background:var(--ul-ink-2)!important;border-color:var(--ul-hair)!important}
main > header > div.mx-auto{padding-bottom:clamp(2.5rem,1.8rem + 3vw,4.5rem)!important}
main .border-b.border-gold\/15, main .border-b.border-gold\/20, main .border-b.border-gold\/25{border-bottom-color:var(--ul-hair-soft)!important}
main ul.grid, main div.grid{column-gap:clamp(1.25rem,2.5vw,2.5rem)}
main ul.grid > li.border-t{padding-top:1.25rem!important}
main .mt-6{margin-top:clamp(1.5rem,1rem + 1.5vw,2.5rem)}

/* ---------- home hero ---------- */
main > section.relative.overflow-hidden:first-child{min-height:min(88vh,860px)!important}
main > section.relative.overflow-hidden:first-child > .relative{min-height:min(88vh,860px)!important;padding-bottom:clamp(3rem,2rem + 4vw,6rem)!important}
main > section.relative.overflow-hidden:first-child > .bg-gradient-to-r{background:linear-gradient(90deg,rgba(11,11,10,.94) 0%,rgba(11,11,10,.78) 38%,rgba(11,11,10,.25) 75%,rgba(11,11,10,.12) 100%)!important}
main > section.relative.overflow-hidden:first-child > .bg-gradient-to-t{background:linear-gradient(0deg,rgba(11,11,10,1) 0%,rgba(11,11,10,.93) 12%,rgba(11,11,10,.35) 32%,rgba(11,11,10,0) 50%,rgba(11,11,10,0) 80%,rgba(11,11,10,.45) 100%)!important}
@media (max-width:767px){
  main > section.relative.overflow-hidden:first-child > .bg-gradient-to-r{background:linear-gradient(180deg,rgba(11,11,10,.35) 0%,rgba(11,11,10,.7) 45%,rgba(11,11,10,.92) 100%)!important}
  main > section.relative.overflow-hidden:first-child > img{object-position:62% 30%}
}
main > section.relative.overflow-hidden:first-child h1{max-width:15ch!important}
/* third hero link reads as a quiet text link, not a third box */
main > section.relative.overflow-hidden:first-child > .relative > a.w-fit{
  height:auto!important;border:0!important;padding:.5rem 0!important;margin-top:1.25rem!important;background:none!important;
  color:var(--ul-gold)!important;letter-spacing:.24em!important;border-bottom:1px solid rgba(196,164,106,.5)!important;
}
main > section.relative.overflow-hidden:first-child > .relative > a.w-fit::after{content:"\2192";margin-left:.6rem;transition:transform .3s var(--ul-ease)}
main > section.relative.overflow-hidden:first-child > .relative > a.w-fit:hover::after{transform:translateX(4px)}

/* ---------- inner-page image band ---------- */
main > div.border-b > img.w-full{max-height:none!important;height:clamp(240px,58vh,640px)!important;object-fit:cover;object-position:center 38%}
@media (max-width:639px){ main > div.border-b > img.w-full{height:clamp(220px,62vw,320px)!important} }

/* page title followed by the "How to start" strip: show the two contact buttons once, in the strip */
main > header:has(+ section[aria-label="How to start"]) .flex.flex-col.gap-3{display:none!important}

/* ---------- buttons ---------- */
main a.inline-flex.h-12, footer a.inline-flex.h-12{
  height:3.125rem!important;padding:0 1.75rem!important;font-size:.74rem!important;letter-spacing:.22em!important;font-weight:500;
  transition:background-color .25s,border-color .25s,color .25s!important;
}
a.bg-gold, button.bg-gold{background:var(--ul-gold)!important;border-color:var(--ul-gold)!important;color:#0b0b0a!important}
a.bg-gold:hover, button.bg-gold:hover{background:var(--ul-gold-hi)!important;border-color:var(--ul-gold-hi)!important}
main a.border-gold\/70:hover{background:rgba(196,164,106,.08)!important}
@media (min-width:640px){ main .flex.flex-col.gap-3.sm\:flex-row{gap:.875rem!important} }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:1px solid var(--ul-gold)!important;outline-offset:3px!important;box-shadow:none!important;
}

main a.inline-flex.h-10{height:2.75rem!important;font-size:.7rem!important;padding:0 1.15rem!important;letter-spacing:.2em!important}
main [role="tablist"] > button{height:2.75rem!important;font-size:.7rem!important;padding:0 1rem!important;letter-spacing:.18em!important}
main > section.relative.overflow-hidden:first-child > .relative > a.w-fit{min-height:2.75rem}
main a[href^="mailto:"]:not(.inline-flex), main a[href^="tel:"]:not(.inline-flex), main a[href*="wa.me"]:not(.inline-flex){display:inline-block;padding:.6rem 0}
footer p.text-\[0\.62rem\]{font-size:.7rem!important;letter-spacing:.26em!important}

/* ---------- cards & images ---------- */
main figure > div.overflow-hidden{border-color:var(--ul-hair)!important;background:#141412}
main figure > div.overflow-hidden > img{transition:transform 1.1s var(--ul-ease),filter .6s}
@media (hover:hover){ main figure:hover > div.overflow-hidden > img{transform:scale(1.035)} }
main figcaption{display:flex!important;flex-direction:column;gap:.2rem;padding-top:.85rem!important;margin-top:0!important}
main figcaption > span.font-heading{font-size:clamp(1.08rem,1rem + .35vw,1.25rem)!important;line-height:1.3}
main figcaption > span.text-xs{font-size:.78rem!important;letter-spacing:.06em;color:#a59c8c}
main figcaption > p{margin-top:.35rem!important}
/* building cards share one frame; interiors keep 4:3 */
main img.aspect-\[4\/3\][src^="/work/work-"]{aspect-ratio:3/2!important}
/* odd number of cards in a 2-column grid: first card runs full width instead of leaving an orphan */
@media (min-width:640px){
  main .grid.sm\:grid-cols-2:not(.lg\:grid-cols-3) > figure:first-child:nth-last-child(odd){grid-column:1/-1}
  main .grid.sm\:grid-cols-2:not(.lg\:grid-cols-3) > figure:first-child:nth-last-child(odd) img{aspect-ratio:21/9!important}
}
@media (min-width:1024px){
  main .grid.lg\:grid-cols-2 > figure:first-child:nth-last-child(odd){grid-column:1/-1}
  main .grid.lg\:grid-cols-2 > figure:first-child:nth-last-child(odd) img{aspect-ratio:21/9!important}
}
main .grid.gap-3 > figure, main .grid.gap-2 > figure{margin-bottom:0!important}
main .grid.gap-3.sm\:grid-cols-2, main .grid.gap-2.sm\:grid-cols-2{row-gap:clamp(1.75rem,3vw,2.75rem)!important;column-gap:clamp(1rem,2vw,1.75rem)!important}
main .grid.gap-12.lg\:grid-cols-2{row-gap:clamp(2rem,4vw,3.5rem)!important;column-gap:clamp(1.25rem,2.5vw,2.5rem)!important}
main video{border:1px solid var(--ul-hair);background:#0b0b0a}

/* ---------- forms (contact) ---------- */
main input, main select, main textarea{min-height:2.875rem;font-size:1rem!important;border-color:rgba(196,164,106,.28)!important;background:#0f0f0e!important;transition:border-color .2s}
main textarea{min-height:7.5rem}
main input:focus, main select:focus, main textarea:focus{border-color:var(--ul-gold)!important}
main label{letter-spacing:.04em}

/* ---------- FAQ ---------- */
main details{border-color:var(--ul-hair-soft)!important}
main summary{cursor:pointer;min-height:2.75rem;padding-top:.6rem;padding-bottom:.6rem}

/* ---------- footer ---------- */
footer{background:#090908!important;border-top:1px solid var(--ul-hair)!important}
footer > div.mx-auto.grid{padding-top:clamp(3.5rem,2.5rem + 4vw,5.5rem)!important;padding-bottom:clamp(2.5rem,2rem + 3vw,4rem)!important;row-gap:2.75rem!important}
footer a[href="/"] img, footer .ul-header-mark{height:52px!important;max-height:52px!important}
footer a[href="/"] > span.font-heading{font-size:1rem!important;letter-spacing:.22em!important}
footer p.uppercase.text-gold{font-size:.7rem!important;letter-spacing:.3em!important;padding-bottom:.75rem;border-bottom:1px solid var(--ul-hair-soft);margin-bottom:.25rem}
footer ul.mt-4{margin-top:.75rem!important;row-gap:0!important}
footer div.lg\:col-span-3 > ul.mt-4{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
footer div.lg\:col-span-3 > ul.mt-4 > li{margin-top:0!important}
footer ul li a{display:inline-flex;align-items:center;min-height:2.5rem;font-size:.92rem!important;transition:color .2s}
footer ul.space-y-2 > li{margin-top:0!important;min-height:2.5rem;display:flex;align-items:center;font-size:.92rem}
footer > div.border-t{border-top-color:var(--ul-hair-soft)!important}
footer > div.border-t > p{font-size:.74rem!important;letter-spacing:.06em!important;padding-top:1.5rem!important;padding-bottom:1.5rem!important}

/* ---------- phone bottom bar ---------- */
body > div.fixed.inset-x-0.bottom-0{padding:.55rem var(--ul-pad) calc(.55rem + env(safe-area-inset-bottom))!important;background:rgba(9,9,8,.96)!important;border-top-color:var(--ul-hair)!important}
body > div.fixed.inset-x-0.bottom-0 a{height:2.875rem!important;font-weight:500!important;letter-spacing:.2em!important}
main#content{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))!important}
footer.pb-16{padding-bottom:calc(4.25rem + env(safe-area-inset-bottom))!important}
@media (min-width:1024px){ main#content{padding-bottom:0!important} footer.pb-16{padding-bottom:0!important} }

/* ---------- phone tidy ---------- */
@media (max-width:639px){
  main .flex.flex-col.gap-3 > a.h-12, main .flex.flex-col.gap-2 > a.h-12{width:100%}
  main ul.grid > li.border-t{padding-top:1rem!important}
}
img, video{max-width:100%}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

form select{width:100%;min-width:0}