@font-face{font-family:"HV Fitzgerald";src:url(https://carre-website.vercel.app/assets/fonts/hv-fitzgerald-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(https://carre-website.vercel.app/assets/fonts/be-vietnam-pro-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(https://carre-website.vercel.app/assets/fonts/be-vietnam-pro-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(https://carre-website.vercel.app/assets/fonts/be-vietnam-pro-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(https://carre-website.vercel.app/assets/fonts/be-vietnam-pro-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --green:#043423; --deep:#022A1C; --petrol:#003D40; --alab:#F5F1E7; --white:#FFFFFF; --ink:#0E211A;
  --serif:"HV Fitzgerald",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Courier New",Courier,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth}
body{background:#D8D3C4;font-family:var(--sans);color:var(--green)}
a{color:inherit;text-decoration:none}
img{display:block}
[class*="bg-"]{background-position:center;background-size:cover;background-repeat:no-repeat}
.slidebox{position:relative;overflow:hidden}
.phl{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity 1.4s ease}
.phl.on{opacity:1}
.bg-terrace_wide{background-image:url(https://carre-website.vercel.app/assets/home/terrace_wide.webp)}
.bg-terrace_chairs{background-image:url(https://carre-website.vercel.app/assets/home/terrace_chairs.webp)}
.bg-bamboo{background-image:url(https://carre-website.vercel.app/assets/home/bamboo.webp)}
.bg-bar{background-image:url(https://carre-website.vercel.app/assets/home/bar.webp)}
.bg-food_table{background-image:url(https://carre-website.vercel.app/assets/home/food_table.webp)}
.bg-breakfast{background-image:url(https://carre-website.vercel.app/assets/home/breakfast.webp)}
.bg-tnd{background-image:url(https://carre-website.vercel.app/assets/home/tnd.webp)}
.bg-9b{background-image:url(https://carre-website.vercel.app/assets/home/9b.webp)}
.bg-usq{background-image:url(https://carre-website.vercel.app/assets/home/usq.webp)}
.bg-pizzawine{background-image:url(https://carre-website.vercel.app/assets/home/pizzawine.webp)}
.bg-tnd2{background-image:url(https://carre-website.vercel.app/assets/home/tnd2.webp)}
.bg-9b2{background-image:url(https://carre-website.vercel.app/assets/home/9b2.webp)}
.bg-usq2{background-image:url(https://carre-website.vercel.app/assets/home/usq2.webp)}
.mono{font-family:var(--mono);letter-spacing:.06em}

.stage{display:flex;justify-content:center;padding:0}
body.mob .stage{padding:48px 0 100px}
.site{width:100%;max-width:none;background:var(--white);container-type:inline-size;container-name:site;box-shadow:0 30px 80px rgba(2,42,28,.25)}
body.mob .site{width:390px;border:10px solid #101010;border-radius:44px;overflow:hidden}

/* pill buttons: the one action style */
.pbtn svg{width:11px;height:11px;vertical-align:-1.5px;margin-right:6px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pbtn{display:inline-block;border:.5px solid currentColor;border-radius:999px;padding:10px 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1;cursor:pointer;background:none;color:inherit;transition:background .25s,color .25s;white-space:nowrap}
.on-green .pbtn:hover{background:var(--alab);color:var(--green)}
.on-light .pbtn{color:var(--green)}
.on-light .pbtn:hover{background:var(--green);color:var(--alab)}

/* ===== HEADER, redesigned ===== */
header{background:var(--green);color:var(--alab);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(245,241,231,.18);transition:background .35s ease,border-color .35s ease}
header.scrolled{background:rgba(4,52,35,.2);border-bottom-color:transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hgrid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 36px;gap:24px}
.hlogo{justify-self:center}
.hnav{display:flex;justify-content:flex-start;gap:28px;font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.hnav a{opacity:.8}.hnav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.hlogo img{height:38px;width:auto;display:block}
.hright{display:flex;gap:10px;align-items:center;justify-content:flex-end;font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.lang-dd{position:relative}
.lang-menu{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:100%;background:var(--green);border:.5px solid rgba(245,241,231,.45);z-index:70}
.lang-dd.open .lang-menu{display:block}
.lang-menu button{display:block;width:100%;background:none;border:none;color:var(--alab);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:11px 14px;cursor:pointer;text-align:center;opacity:.6;transition:opacity .2s}
.lang-menu button.on,.lang-menu button:hover{opacity:1;background:rgba(245,241,231,.08)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px 0}
.burger i{display:block;width:22px;height:1px;background:#fff}
@container site (max-width:760px){
  .hgrid{padding:14px 18px;grid-template-columns:1fr auto}
  .hnav,.lang-dd{display:none}
  .hright .pbtn{display:none}
  .burger{display:flex}
  .hlogo{justify-self:start}
  .hlogo img{height:31px}
}

/* ===== HERO: stacked type, 30% overlap onto photo ===== */
.hero{background:var(--green);color:var(--alab);text-align:center;padding:96px 0 0;overflow:hidden}
.hero h1{will-change:transform,opacity;font-family:var(--serif);font-weight:400;font-size:clamp(74px,14.5cqw,230px);line-height:.94;position:relative;z-index:2;margin-bottom:-.34em;width:100%}
.hero-photo{width:100%;aspect-ratio:16/9;position:relative;z-index:1;overflow:hidden}
@container site (max-width:760px){ .hero{padding-top:64px} .hero h1{font-size:clamp(89px,17.4cqw,276px)} .hero-photo{aspect-ratio:4/5} }

/* ===== SECTIONS ===== */
section{padding:120px 40px}
@container site (max-width:760px){ section{padding:76px 20px} }
.h-center{text-align:center}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.8cqw,84px);line-height:1.04}
.loc-title{font-size:clamp(55px,10.9cqw,172px);line-height:.94;margin-top:-.47em;position:relative;z-index:2}
section.locs{padding-top:0}
@container site (max-width:760px){ .loc-title{font-size:clamp(67px,13cqw,207px)} }
.sub-mono{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-top:22px;opacity:.65}

/* ===== LOCATIONS ===== */
.cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 -12px 160px}
.card{text-align:center}
.card .ph{aspect-ratio:16/11;margin-bottom:34px}
.lgrow{display:flex;justify-content:center;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.lgrow img{height:30px;width:auto}
.lgrow img.exp{height:auto;width:100px}
.card h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3cqw,42px)}
.card .addr{font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.7;color:rgba(4,52,35,.85);max-width:36ch;margin:0 auto}
.card .hrs{font-family:var(--mono);font-size:12px;letter-spacing:.22em;margin-top:8px;color:var(--green)}
/* wrap, not nowrap: Thao Dien carries a third button (Book a table) and three
   pills do not fit a phone. nowrap forced the card 68px past the viewport. */
.card .acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
@container site (max-width:760px){
  .cc-grid{grid-template-columns:1fr;gap:78px;margin:0 0 90px}
  .locs .ex-wrap{margin:0 -20px -76px;padding:72px 20px 76px}
  .card .ph{margin-left:-20px;margin-right:-20px;aspect-ratio:4/5}
}
.ex-wrap{background:var(--green);color:#fff;margin:0 -40px -120px;padding:96px 40px 120px}
.ex-wrap .card h3{color:#fff}
.ex-wrap .card .addr{color:rgba(245,241,231,.85)}
.ex-wrap .card .hrs{color:var(--alab)}
.ex-wrap .pbtn{color:#fff}
.ex-wrap .pbtn:hover{background:var(--alab);color:var(--green)}
.ex-head{text-align:center;margin-bottom:64px}
.ex-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.2cqw,74px)}
.ex-head .ex-logo{display:block;width:146px;height:auto;margin:0 auto 20px}
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 -12px}
.ex-grid .ph{aspect-ratio:4/5;margin-bottom:28px}
.ex-grid h3{font-size:clamp(24px,2.4cqw,32px)}
@container site (max-width:760px){
  .ex-grid{grid-template-columns:1fr;gap:72px;margin:0}
  .ex-grid .ph{margin-left:-20px;margin-right:-20px}
}

/* ===== MENU ===== */
.menu{background:var(--white)}
.filters{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.filters + .filters{margin-top:14px}
.fbtn{border:.5px solid var(--green);border-radius:999px;background:none;color:var(--green);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:10px 18px;cursor:pointer;line-height:1;transition:background .2s,color .2s}
.fbtn.on{background:var(--green);color:var(--alab)}
.cat-toggles{display:flex;justify-content:center;gap:28px;margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.cat-toggles span{cursor:pointer;opacity:.4;color:var(--green)}
.cat-toggles span.on{opacity:1;text-decoration:underline;text-underline-offset:5px}
.mgrid{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:44px 28px}
.mgrid .mi:nth-child(n+9){display:none}
.mi .ph{aspect-ratio:4/5;background:linear-gradient(180deg,#FFFFFF 0%,var(--alab) 100%);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.mi .ph img{width:auto;height:auto;max-width:74%;max-height:80%}
.mi{text-align:center}
.mi h4{font-family:var(--serif);font-weight:400;font-size:19px;margin-bottom:5px}
.mi .price{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--green);margin-top:8px}
.mi.hide{display:none}
.mi .price{display:none}
.mi p{font-family:var(--sans);font-weight:300;font-size:12.5px;line-height:1.6;color:rgba(4,52,35,.72)}
@container site (max-width:760px){ .mgrid{grid-template-columns:1fr 1fr;gap:32px 16px} .mi h4{font-size:16px} .mgrid .mi:nth-child(n+5){display:none} .filters{flex-wrap:nowrap;gap:8px} }
.menu-cta{margin-top:64px;text-align:center}

/* ===== MOMENTS + quote + slider ===== */
.moments{background:var(--green);color:var(--alab);padding-left:0;padding-right:0;padding-bottom:110px}
.moments h2{font-size:clamp(44px,7.6cqw,124px);line-height:1.02;padding:0 10px}
.slider{position:relative;margin-top:84px;padding:0 20px}
.viewport{overflow:hidden}
.track{display:flex;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.slide{flex:0 0 50%;padding:0 8px}
.slide .ph{aspect-ratio:16/11;margin-bottom:24px;user-select:none;-webkit-user-drag:none}
.viewport{cursor:grab}
.viewport:active{cursor:grabbing}
.slide .when{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.65}
.slide h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6cqw,36px);margin:10px 0 8px}
.slide p{font-size:13.5px;line-height:1.65;color:rgba(245,241,231,.8);max-width:44ch}
.sctrl{display:flex;justify-content:flex-end;gap:10px;margin-top:26px;padding-right:8px}
.sctrl button{width:34px;height:34px;border-radius:50%;border:.5px solid var(--alab);background:none;color:var(--alab);font-size:13px;cursor:pointer;transition:background .25s,color .25s;line-height:1}
.sctrl button:hover{background:var(--alab);color:var(--green)}
@container site (max-width:760px){
  .slider{padding:0 8px}
  .slide{flex-basis:90%;padding:0 3px}
  .slide .ph{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){.track{transition:none}}

/* ===== EVENTS ===== */
.ev{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;padding:0}
.ev-copy{padding:120px 48px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin-bottom:24px}
.ev h2{font-size:clamp(38px,4.6cqw,64px)}
.ev .lead{margin:24px 0 34px;font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.75;max-width:46ch;color:rgba(4,52,35,.85)}
.ev-ph{height:100%;min-height:560px;position:relative;overflow:hidden}
.ul{text-decoration:underline;text-underline-offset:4px}
@container site (max-width:760px){ .ev{grid-template-columns:1fr} .ev-copy{padding:76px 20px} .ev-ph{height:auto;min-height:0;aspect-ratio:4/5} }

/* ===== FOOTER, redesigned ===== */
footer{background:var(--deep);color:#fff;padding:80px 40px 36px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;align-items:start}
.fbrand img{height:34px;width:auto;margin-bottom:22px}
.fbrand p{font-size:12px;line-height:1.75;color:#fff;max-width:30ch}
.fcol b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:400}
.fcol a{display:block;font-family:var(--sans);font-weight:300;font-size:12px;line-height:2.1;color:#fff}
.fcol a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.fcol .social{display:flex;gap:16px;margin-top:14px}
.fcol .social a{display:inline-block;line-height:1;opacity:.95}
.fcol .social a:hover{opacity:1}
.fcol .social svg{display:block}
.imprint{margin-top:64px;padding-top:22px;border-top:1px solid rgba(245,241,231,.16);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@container site (max-width:760px){
  footer{padding:60px 20px 28px}
  .fgrid{grid-template-columns:1fr 1fr;gap:36px}
  .fbrand{grid-column:1 / -1}
}



/* mobile nav panel (65% height, Avenoria-style) */
.mnav{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;padding:14px 18px 30px;background:rgba(4,52,35,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--alab);opacity:0;pointer-events:none;transition:opacity .35s ease;overflow-y:auto}
.mnav.open{opacity:1;pointer-events:auto}
.mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.mnav-top img{height:31px;width:auto}
.mnav-top button{background:none;border:none;color:var(--alab);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.mnav-links{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.mnav-links a{display:block;overflow:hidden;font-family:var(--serif);font-size:clamp(39px,9.9vw,55px);line-height:1.25}
.mnav-links a>span{display:block;transform:translateY(115%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.mnav-links .arr{display:inline;font-size:.5em;vertical-align:.5em;margin-left:.18em}
.mnav.open .mnav-links a>span{transform:none}
.mnav.open .mnav-links a:nth-child(1)>span{transition-delay:.06s}.mnav.open .mnav-links a:nth-child(2)>span{transition-delay:.12s}.mnav.open .mnav-links a:nth-child(3)>span{transition-delay:.18s}.mnav.open .mnav-links a:nth-child(4)>span{transition-delay:.24s}
.mnav.open .mnav-links a:nth-child(5)>span{transition-delay:.3s}
.mnav-info{margin-top:auto;padding-top:36px;display:flex;flex-direction:column;gap:12px}
.mnav-info b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;font-weight:400;margin-bottom:2px}
.mnav-info span{font-family:var(--sans);font-weight:300;font-size:13px}
.mnav-bot{padding-top:20px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.mnav-bot .lsw b{font-weight:400;opacity:.45;cursor:pointer}
.mnav-bot .lsw b.on{opacity:1;text-decoration:underline;text-underline-offset:4px}
/* event enquiry screen */
.enq{position:fixed;inset:0;z-index:130;background:var(--green);color:var(--alab);display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:26px 24px 60px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.enq.open{opacity:1;pointer-events:auto}
/* enquiry close button — was unstyled (raw UA button); match mnav-top button's light-on-dark mono treatment */
.enq-x{align-self:flex-end;background:none;border:.5px solid rgba(245,241,231,.55);border-radius:999px;padding:8px 16px;margin-bottom:4px;color:var(--alab);font-family:var(--mono);text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.enq-x:hover{background:var(--alab);color:var(--green);border-color:var(--alab)}
.enq h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,58px);text-align:center;line-height:1.1;margin:6vh 0 10px;max-width:16ch}
.enq .sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.65;margin-bottom:34px;text-align:center}
.enq form{width:100%;max-width:430px;display:flex;flex-direction:column;gap:12px}
.enq input,.enq select,.enq textarea{width:100%;background:none;border:1px solid rgba(245,241,231,.55);border-radius:14px;padding:14px 16px;color:var(--alab);font-family:var(--sans);font-weight:300;font-size:14px;outline:none}
.enq input::placeholder,.enq textarea::placeholder{color:rgba(245,241,231,.55)}
.enq input:focus,.enq select:focus,.enq textarea:focus{border-color:var(--alab)}
.enq select{appearance:none;-webkit-appearance:none}
.enq option{color:var(--green)}
.enq .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.enq textarea{min-height:110px;resize:vertical}
.enq .enq-send{margin-top:10px;background:var(--white);color:var(--green);border:none;border-radius:999px;padding:16px 24px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.enq .enq-send:hover{background:var(--alab)}
.enq .note{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;opacity:.5;margin-top:16px;text-align:center}
body.lock{overflow:hidden}
/* in the phone-preview cockpit, overlays stay inside the phone frame */
body.mob .enq{left:50%;right:auto;width:370px;transform:translateX(-50%);top:58px;bottom:0;border-radius:34px 34px 0 0;overflow:hidden}
body.mob .mnav{left:50%;right:auto;width:370px;transform:translateX(-50%);top:58px;bottom:0;border-radius:34px 34px 0 0}
body.mob .enq{overflow-y:auto}
/* masked line reveals (vero-style) */
.lm{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lm>span{display:block;transform:translateY(112%);transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.lines.in .lm>span,.lines.loaded .lm>span{transform:none}
.lines .lm:nth-child(2)>span{transition-delay:.09s}
.lines .lm:nth-child(3)>span{transition-delay:.18s}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
h2.rv,h3.rv{transform:translateY(44px) scale(.96);transition-duration:1.05s,1.05s}
h2.rv.in,h3.rv.in{transform:none}
h2.rv.lines,.loc-title.lines{transform:none;opacity:1}
.rv.in{opacity:1;transform:none}
/* staggered card + menu reveals */
.cc-grid .card:nth-child(2){transition-delay:.12s}
.ex-grid .card:nth-child(2){transition-delay:.1s}
.ex-grid .card:nth-child(3){transition-delay:.2s}
.mgrid.rv .mi{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.mgrid.rv.in .mi{opacity:1;transform:none}
.mgrid.rv.in .mi:nth-child(2){transition-delay:.06s}
.mgrid.rv.in .mi:nth-child(3){transition-delay:.12s}
.mgrid.rv.in .mi:nth-child(4){transition-delay:.18s}
.mgrid.rv.in .mi:nth-child(5){transition-delay:.24s}
.mgrid.rv.in .mi:nth-child(6){transition-delay:.3s}
.mgrid.rv.in .mi:nth-child(7){transition-delay:.36s}
.mgrid.rv.in .mi:nth-child(8){transition-delay:.42s}
.mgrid.rv.in .mi:nth-child(9){transition-delay:.48s}
/* parallax plumbing */
.plx-wrap{position:relative;overflow:hidden}
.plx{position:absolute;inset:-9% 0;will-change:transform}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.mgrid.rv .mi{opacity:1;transform:none;transition:none}}
/* courier normalization: one size, one tracking */
.pbtn,.fbtn,.sub-mono,.kicker,.card .hrs,.mi .price,.slide .when,.fcol b,.imprint,.lang-menu button,.mnav-bot,.mnav-info b,.enq .sub,.enq .note,.enq-x,.mnav-top button{font-size:12px!important;letter-spacing:.22em!important;opacity:1!important}
.cat-toggles,.cat-toggles span{font-family:var(--mono)!important;font-size:12px!important;letter-spacing:.22em!important}