/* ===== Look Limo - Luxury Limousine Service ===== */
:root{
  --black:#0a0a0a;
  --ink:#111214;
  --panel:#15161a;
  --panel2:#1c1e24;
  --gold:#c9a44c;
  --gold-2:#e8c877;
  --gold-soft:#d9b968;
  --silver:#cfd2d6;
  --white:#ffffff;
  --muted:#a7abb4;
  --line:rgba(201,164,76,.18);
  --radius:14px;
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --container:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--black);
  color:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.12;letter-spacing:.3px}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.gold-text{color:var(--gold)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:50px;font-weight:500;font-size:.95rem;
  letter-spacing:.6px;text-transform:uppercase;cursor:pointer;border:1px solid transparent;
  transition:transform .2s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.btn--gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#141007;box-shadow:0 10px 26px rgba(201,164,76,.28)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,164,76,.42)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-2)}
.btn--lg{padding:1.05rem 2.1rem;font-size:1rem}
.btn--block{width:100%}

/* topbar */
.topbar{background:#000;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--muted)}
/* min-height, not height. There are three items in here now - two numbers and
   the email - and on a narrow screen they wrap onto a second line. A fixed
   42px bar does not grow to meet them, it just crops the second row, and a
   phone number cropped in half still looks like a phone number. */
.topbar__inner{display:flex;justify-content:space-between;align-items:center;
  min-height:42px;padding:.3rem 0;flex-wrap:wrap;gap:.1rem 1rem}
.topbar__left{display:flex;gap:.3rem 1.4rem;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:.4rem;transition:color .2s}
.topbar__item:hover{color:var(--gold-2)}
.topbar__tag{letter-spacing:2px;text-transform:uppercase;font-size:.72rem;color:var(--gold)}
.ic{color:var(--gold)}

/* header */
.header{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid var(--line);transition:background .3s,box-shadow .3s}
.header.scrolled{background:#000;box-shadow:0 8px 30px rgba(0,0,0,.7)}
.header__inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 0;position:relative}
.brand{display:flex;justify-content:center}
.brand__logo{height:180px;width:auto;border-radius:10px;transition:height .3s}
.header.scrolled .brand__logo{height:132px}
.nav{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}
.nav__link{font-size:.9rem;letter-spacing:1px;text-transform:uppercase;color:#e9e9ec;position:relative;padding:.3rem 0;transition:color .2s}
.nav__link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:width .25s}
.nav__link:hover{color:var(--gold-2)}
.nav__link:hover::after{width:100%}
.nav__cta{margin-left:.4rem}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;position:absolute;right:0;top:50%;transform:translateY(-50%)}
.nav__toggle span{width:26px;height:2px;background:var(--gold);transition:.3s}

/* hero video */
.herovid{position:relative;z-index:2;background:#000;overflow:hidden;text-align:center;
  border-top:1px solid rgba(212,175,55,.22);border-bottom:1px solid rgba(212,175,55,.22)}
/* blurred ambient wash so the band is filled edge to edge, never plain black */
.herovid__bg{position:absolute;inset:-60px;z-index:0;
  background:url('assets/hero-image.jpg') center center/cover no-repeat;
  filter:blur(46px) saturate(1.25) brightness(.72)}
.herovid__bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.06) 0%,rgba(0,0,0,.5) 82%)}
.herovid__inner{position:relative;z-index:1;padding:1.6rem 16px 1.9rem}
.herovid__k{font-family:'Jost',sans-serif;font-size:.8rem;letter-spacing:5px;text-transform:uppercase;color:var(--gold-2);margin:0 0 1rem;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.herovid__frame{position:relative;width:min(100%,calc(min(86vh,900px) * 0.5625));margin:0 auto;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#050505;border:1px solid rgba(212,175,55,.45);box-shadow:0 30px 80px rgba(0,0,0,.85),0 0 56px rgba(212,175,55,.18)}
/* The iframe is deliberately TALLER than the frame that shows it.
   YouTube's title bar, channel name, share link and the YouTube wordmark are
   anchored to the edges of the PLAYER, and they cannot be turned off:
   modestbranding is deprecated and mobile Safari ignores controls=0, which is
   why the client kept seeing "Tom Peacock Cadillac" and a YouTube logo over
   his own hero.
   The player never crops a video, it letterboxes it. So making the player 130%
   tall at the same width leaves a 15% black bar above and below the 9:16 clip,
   the chrome lands on those bars, and .herovid__frame's overflow:hidden cuts
   them off. The visible picture is the full clip - nothing is zoomed and no
   frame is lost. 15% is measured off the client's own screenshot, where the
   title bar occupied 9% and the wordmark 5% of the frame height. */
.herovid__frame iframe{position:absolute;left:0;top:-15%;width:100%;height:130%;border:0;display:block;pointer-events:none}
/* City names are longer than the brand name. .hero__brand's 13vw is tuned for
   "LOOK LIMO" - nine characters - and "PHILADELPHIA" is twelve, so on a phone
   it ran off the edge and rendered as "PHILADELPHI".
   It did not widen the page, because .hero is overflow:hidden, so the usual
   horizontal-scroll check passed while the word was being cut in half. */

/* breadcrumb when it sits in the home-style hero rather than a pagehero */
.crumb--hero{margin-top:1.4rem;justify-content:center;display:flex;gap:.5rem;
  font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.crumb--hero a{color:var(--gold-2)}

/* --- self-hosted hero video (the alternative to the YouTube embed) ---------
   Landscape and full-bleed, which the 9:16 embed could never be: covering a
   1280px-wide band with a vertical clip would have cropped it to about a
   quarter of its height and sliced the vehicle in half.
   A <video> with no `controls` attribute draws NO interface - not hidden by a
   setting, simply not rendered - which is the whole point of the switch. */
.herovid--wide{border-top:1px solid rgba(212,175,55,.22);border-bottom:1px solid rgba(212,175,55,.22)}
.herovid__inner--wide{padding:1.6rem 0 0}
.herovid__wide{position:relative;width:100%;line-height:0;overflow:hidden;background:#000}
.herovid__vid{display:block;width:100%;height:auto}
@media(min-width:900px){
  .herovid__wide{height:62vh}
  .herovid__vid{height:100%;object-fit:cover;object-position:center 46%}
}
/* the band's ambient blur is not needed when the video fills the width */
.herovid--wide .herovid__bg{display:none}

/* transparent shield - stops any click reaching YouTube */
.herovid__shield{position:absolute;inset:0;z-index:2;background:transparent;cursor:default}

/* hero */
.hero{position:relative;overflow:hidden;background:#000}
.hero__inner{position:relative;z-index:2;text-align:center;padding:4.4rem 24px 2.2rem;max-width:900px;margin:0 auto;width:100%}
.hero__media{position:relative;width:100%;line-height:0}
.hero__media img{display:block;width:100%;height:auto}
.hero__media::before{content:"";position:absolute;top:0;left:0;right:0;height:42%;z-index:1;background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,0) 100%)}
@media(min-width:900px){
  .hero__media{height:66vh}
  .hero__media img{height:100%;object-fit:cover;object-position:center 40%}
}
.hero__welcome{font-family:'Great Vibes',cursive;font-weight:400;color:#fff;font-size:clamp(2.2rem,6vw,3.8rem);line-height:1;margin-bottom:.1rem}
.hero__brand{font-size:clamp(3.6rem,13vw,8.4rem);color:var(--gold-2);text-transform:uppercase;letter-spacing:.02em;line-height:.92;margin:0 0 1rem;text-shadow:0 6px 30px rgba(0,0,0,.5)}
/* Sized by CHARACTER COUNT, not a fixed vw. One vw value cannot fit both
   "NEW YORK" and "PHILADELPHIA": tuning it for the long one leaves the short
   one small, and tuning it for the short one clips the long one. --chars is
   set inline per city and the width divides by it. 1.06 is the average glyph
   width of this typeface in uppercase, measured against the rendered result
   rather than guessed. */
.hero__brand--city{font-size:clamp(1.6rem,calc(86vw / var(--chars,10) / 1.06),6.4rem);
  word-break:normal;hyphens:none;white-space:nowrap}
.hero__tag{color:#fff;font-weight:600;letter-spacing:4px;text-transform:uppercase;font-size:clamp(.82rem,2.2vw,1.05rem);margin-bottom:2.4rem}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* sections */
.section{padding:6rem 0}
.section__head{text-align:center;max-width:680px;margin:0 auto 3.4rem}
.eyebrow{color:var(--gold);letter-spacing:3px;text-transform:uppercase;font-size:.78rem;margin-bottom:.7rem}
.section__title{font-size:clamp(2.1rem,4vw,3.1rem);margin-bottom:1rem}
.section__title--left{text-align:left}
.section__lead{color:var(--muted);font-weight:300;font-size:1.05rem}
.grid{display:grid;gap:1.6rem}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

/* service cards */
.services{background:linear-gradient(180deg,#0a0a0b,#0e0f12)}
.scard{background:var(--panel);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.scard:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow)}
.scard__img{height:180px;background-size:cover;background-position:center;filter:grayscale(.15)}
.scard__body{padding:1.5rem 1.4rem 1.7rem}
.scard__body h3{font-size:1.5rem;color:#fff;margin-bottom:.5rem}
.scard__body p{color:var(--muted);font-size:.94rem;font-weight:300;margin-bottom:1rem}
.scard__link{color:var(--gold-2);font-size:.85rem;letter-spacing:1px;text-transform:uppercase;font-weight:500;transition:gap .2s,color .2s}
.scard__link:hover{color:var(--gold)}

/* services overview - photo cards, text over a dark fade */
.svcgrid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:2.2rem}
.svc{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:430px;
  border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08);
  transition:border-color .3s,box-shadow .3s,transform .3s}
.svc__img{position:absolute;inset:0;z-index:-2;background-size:cover;background-repeat:no-repeat;transition:transform .9s ease}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.55) 58%,rgba(10,10,10,.94) 100%)}
.svc:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-4px)}
.svc:hover .svc__img{transform:scale(1.06)}
.svc__body{display:block;width:100%;padding:1.7rem 1.5rem 1.6rem}
.svc__num{display:block;color:var(--gold);font-size:.78rem;letter-spacing:3px;margin-bottom:.35rem}
.svc h3{font-size:clamp(1.75rem,3.2vw,2.3rem);color:#fff;margin-bottom:.5rem}
.svc p{color:#d9dbe0;font-weight:300;font-size:.97rem;max-width:34em;margin-bottom:1rem}
.svc__link{color:var(--gold-2);font-size:.84rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:500}
.svc:hover .svc__link{color:var(--gold)}
@media (min-width:720px){
  .svcgrid{grid-template-columns:1fr 1fr;gap:26px}
  .svc{min-height:470px}
  .svc__body{padding:2rem 2rem 1.9rem}
}
@media (min-width:1100px){ .svc{min-height:500px} }

/* service showcase (King-style image panels + icon nav) */
.svcshow{background:var(--black);position:relative}
.svcshow__stage{position:relative}
.spanel{display:none;position:relative;min-height:clamp(440px,72vh,660px);background-size:cover;background-position:center;align-items:flex-end;justify-content:center;overflow:hidden}
.spanel.active{display:flex;animation:svcfade .55s ease}
@keyframes svcfade{from{opacity:.35}to{opacity:1}}
.spanel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 25%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.88))}
.spanel__cap{position:relative;z-index:2;width:100%;max-width:760px;text-align:center;padding:0 24px 3.4rem}
.spanel__k{display:block;color:var(--gold-2);letter-spacing:4px;text-transform:uppercase;font-size:.72rem;margin-bottom:.7rem}
.spanel__cap h3{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;color:#fff;font-size:clamp(2.6rem,7vw,4.2rem);line-height:1;margin-bottom:.6rem}
.spanel__cap p{color:#e6e7ea;font-weight:300;font-size:1.08rem;max-width:560px;margin:0 auto 1rem}
.spanel__go{display:inline-block;color:var(--gold-2);text-transform:uppercase;letter-spacing:2px;font-size:.78rem;font-weight:500}
.spanel:hover .spanel__go{color:var(--gold)}
.svcnav{display:grid;grid-template-columns:repeat(4,1fr);background:#060606;border-top:1px solid var(--line)}
.svcnav__btn{background:none;border:0;border-right:1px solid rgba(255,255,255,.07);cursor:pointer;padding:1.35rem .5rem 1.15rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#c9cace;transition:background .25s,color .25s;box-shadow:inset 0 0 0 rgba(201,164,76,0)}
.svcnav__btn:last-child{border-right:0}
.svcnav__btn svg{width:30px;height:30px;fill:none;stroke:var(--gold-2);stroke-width:1.5;transition:stroke .25s}
.svcnav__btn span{font-size:.76rem;letter-spacing:1.6px;text-transform:uppercase}
.svcnav__btn:hover{background:#0d0d0f;color:#fff}
.svcnav__btn.active{background:linear-gradient(180deg,rgba(201,164,76,.18),rgba(201,164,76,0));color:#fff;box-shadow:inset 0 3px 0 var(--gold)}

/* fleet */
.fleet{background:var(--black)}
.fcard{position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,.06)}
.fcard__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s;filter:brightness(.72)}
.fcard:hover .fcard__img{transform:scale(1.07)}
.fcard::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.88))}
.fcard__body{position:relative;z-index:2;padding:1.6rem}
.fcard__cap{display:inline-block;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold-2);margin-bottom:.4rem}
.fcard__body h3{font-size:1.7rem;color:#fff;margin-bottom:.3rem}
.fcard__body p{color:#c7cad0;font-size:.9rem;font-weight:300}

/* vehicle cards (King-style: passenger badge + name overlay + feature chips) */
.vcard{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s}
.vcard:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:var(--shadow)}
/* A FIXED RATIO, not a fixed height. With height:238px and a fluid width the
   box was 1.30 on a phone and 1.53 in the desktop grid, so background-size:
   cover cropped a different slice of the photo on every screen - which is how
   the Escalade lost its back end on the client's phone while looking fine on
   mine.
   The sharp photo is `contain`, so the whole vehicle is always visible
   whatever its shape; .vcard__bg is the same photo blurred and `cover` behind
   it so the card is still filled rather than pillarboxed. */
.vcard__img{position:relative;aspect-ratio:3/2;background-color:#07070a;overflow:hidden}
/* Layer order matters and is not obvious: an element's OWN background always
   paints beneath its children, so the blurred copy had to become a child or it
   would have covered the sharp one. The inline style on .vcard__img therefore
   only exists as the SOURCE that ::before inherits. */
.vcard__bg{position:absolute;inset:-8%;z-index:0;background-size:cover;
  background-position:center;filter:blur(26px) saturate(1.15) brightness(.5)}
.vcard__img::before{content:"";position:absolute;inset:0;z-index:1;
  background-image:inherit;background-size:contain;background-position:center;
  background-repeat:no-repeat}
.vcard__img::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 38%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.92))}
/* Passengers and bags sit side by side in one row. The pills used to be
   absolutely positioned on their own, so a second one would have landed
   exactly on top of the first. */
.vcard__chips{position:absolute;top:14px;left:14px;right:14px;z-index:3;
  display:flex;flex-wrap:wrap;gap:.45rem}
.vcard__pax{position:static;display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:#141414;border-radius:50px;padding:.34rem .8rem;font-size:.72rem;font-weight:600;letter-spacing:.4px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.vcard__pax svg{width:15px;height:15px;stroke:#141414;fill:none;stroke-width:1.7}
/* 3, above the ::after gradient. ::after is generated last, so at the same
   z-index it paints OVER real children and the vehicle names washed out. */
.vcard__title{position:absolute;left:16px;right:16px;bottom:13px;z-index:3}
.vcard__title h3{color:#fff;font-size:1.75rem;line-height:1;margin:0}
.vcard__sim{color:var(--gold-2);font-size:.72rem;font-style:italic;letter-spacing:.4px}
.vcard__feats{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;padding:1.05rem 1.15rem 1.25rem;margin:0}
.vcard__feats li{display:flex;align-items:center;gap:.45rem;color:#c7cad0;font-size:.82rem;font-weight:300}
.vcard__feats svg{width:19px;height:19px;stroke:var(--gold-2);fill:none;stroke-width:1.5;flex:0 0 auto}

/* fleet carousel (home) */
.fleetcarousel{position:relative}
.fleetrail{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem 2px 1.2rem;scrollbar-width:none;scroll-behavior:smooth}
.fleetrail::-webkit-scrollbar{display:none}
.fleetrail .vcard{flex:0 0 clamp(280px,80vw,362px);scroll-snap-align:center}
@media(min-width:900px){.fleetrail .vcard{flex-basis:360px}}
.fleetarrow{position:absolute;top:119px;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(10,10,11,.82);color:var(--gold-2);font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .2s;backdrop-filter:blur(4px)}
.fleetarrow:hover{background:var(--gold);color:#141007;transform:translateY(-50%) scale(1.06)}
.fleetarrow--prev{left:-8px}
.fleetarrow--next{right:-8px}
@media(max-width:760px){.fleetarrow{display:none}}

/* stats */
.stats{background:linear-gradient(135deg,#12100a,#0a0a0a);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:3.4rem 0}
.stats__grid{text-align:center}
.stat strong{display:block;font-family:'Cormorant Garamond',serif;font-size:3rem;color:var(--gold-2);line-height:1}
.stat span{font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

/* about */
.about{background:#0c0c0e}
.about__inner{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.about__media img{border-radius:var(--radius);box-shadow:var(--shadow);height:100%;object-fit:cover;border:1px solid var(--line)}
.about__text p{color:var(--muted);font-weight:300;margin-bottom:1.4rem}
.ticks{list-style:none;margin:0 0 1.8rem}
.ticks li{position:relative;padding-left:1.9rem;margin-bottom:.8rem;color:#e2e3e7}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gold);font-weight:700}

/* quote */
.quote{background:linear-gradient(180deg,#0a0a0b,#101013)}
.quote__inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.4rem;align-items:start}
.quote__info p{color:var(--muted);font-weight:300;margin-bottom:1.6rem}
.contactlist{list-style:none}
.contactlist li{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;font-size:1.05rem}
.contactlist a:hover{color:var(--gold-2)}
.quote__form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.quote__form input,.quote__form select,.quote__form textarea{
  width:100%;background:var(--panel2);border:1px solid rgba(255,255,255,.09);border-radius:10px;
  padding:.9rem 1rem;color:#fff;font-family:inherit;font-size:.95rem;margin-bottom:1rem;transition:border-color .2s
}
.quote__form input::placeholder,.quote__form textarea::placeholder{color:#7d818a}
.quote__form input:focus,.quote__form select:focus,.quote__form textarea:focus{outline:none;border-color:var(--gold)}
.quote__form select{color:#c7cad0}
.formnote{margin-top:.6rem;font-size:.9rem;text-align:center;color:var(--gold-2)}
.fgroup{font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold-2);margin:.2rem 0 1rem;padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.fgroup + .frow,.fgroup + input{margin-top:0}
.quote__form .fgroup:not(:first-child){margin-top:1.1rem}
.fsmall{margin-top:.9rem;font-size:.78rem;line-height:1.5;text-align:center;color:#8b8f98;font-weight:300}

/* booking steps */
.bsteps{padding-top:3.4rem}
.bsteps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.bstep{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.5rem;text-align:center}
.bstep__n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(212,175,55,.5);color:var(--gold-2);font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin-bottom:.9rem}
.bstep h4{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:#fff;margin:0 0 .45rem;font-weight:600}
.bstep p{color:var(--muted);font-weight:300;font-size:.92rem;margin:0}

/* cta banner */
.ctabanner{background:linear-gradient(120deg,rgba(201,164,76,.14),rgba(0,0,0,0)),url('assets/about.jpg') center/cover fixed;padding:5rem 0;text-align:center;position:relative}
.ctabanner::before{content:"";position:absolute;inset:0;background:rgba(6,6,6,.78)}
.ctabanner__inner{position:relative;z-index:2}
.ctabanner h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:.4rem}
.ctabanner p{color:var(--muted);margin-bottom:1.8rem;font-weight:300}

/* footer */
.footer{background:#060606;border-top:1px solid var(--line);padding-top:4rem}
.footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem;padding-bottom:3rem}
.footer__logo{height:64px;margin-bottom:1rem;border-radius:8px}
.footer__brand p{color:var(--muted);font-weight:300;font-size:.92rem;max-width:280px}
.footer__col h4{color:var(--gold-2);font-size:1.15rem;margin-bottom:1rem;letter-spacing:.5px}
.footer__col a,.footer__col span{display:block;color:var(--muted);font-size:.92rem;margin-bottom:.6rem;font-weight:300;transition:color .2s}
.footer__col a:hover{color:var(--gold-2)}
.footer__bar{border-top:1px solid rgba(255,255,255,.06);padding:1.4rem 0}
.footer__bar-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;color:#6f7178;font-size:.82rem}

/* floating call button */
.fab{position:fixed;right:20px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#141007;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;box-shadow:0 10px 26px rgba(201,164,76,.4);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,164,76,.5)}70%{box-shadow:0 0 0 16px rgba(201,164,76,0)}100%{box-shadow:0 0 0 0 rgba(201,164,76,0)}}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ===== responsive ===== */
@media (max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .about__inner,.quote__inner{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr}
  .hero{background-attachment:scroll}
}
@media (max-width:760px){
  .brand__logo{height:134px}
  .header.scrolled .brand__logo{height:106px}
  .nav{position:absolute;top:100%;left:0;right:0;background:#0a0a0b;flex-direction:column;gap:0;padding:.6rem 0;border-bottom:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility .3s;box-shadow:0 20px 40px rgba(0,0,0,.6)}
  .nav.open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav__link{width:100%;text-align:center;padding:.9rem 0}
  .nav__link::after{display:none}
  .nav__cta{margin:.6rem auto}
  .nav__toggle{display:flex}
  .topbar__right{display:none}
  .topbar__inner{justify-content:center}
  .topbar__left{justify-content:center;gap:.25rem .9rem}
  .topbar{font-size:.78rem}
  .section{padding:4.2rem 0}
  .grid--4,.grid--3{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer__inner{grid-template-columns:1fr 1fr}
  .footer__bar-inner{flex-direction:column;text-align:center}
  .hero__inner{padding:2.6rem 24px 1.8rem}
  .frow{grid-template-columns:1fr}
  .bsteps__grid{grid-template-columns:1fr}
  .bsteps{padding-top:2.6rem}
  .herovid__inner{padding:1.2rem 10px 1.4rem}
  .svcnav__btn{padding:1rem .3rem .85rem;gap:.4rem}
  .svcnav__btn svg{width:24px;height:24px}
  .svcnav__btn span{font-size:.64rem;letter-spacing:1px}
  .spanel__cap{padding-bottom:2.4rem}
}
@media (max-width:440px){
  .footer__inner{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr 1fr}
}

/* ===================================================================
   INNER PAGES
=================================================================== */
.pagehero{position:relative;padding:8.5rem 0 5rem;text-align:center;background-size:cover;background-position:center;background-attachment:fixed}
.pagehero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,7,.72),rgba(6,6,7,.88))}
.pagehero__inner{position:relative;z-index:2}
.pagehero h1{font-size:clamp(2.4rem,5vw,3.8rem);margin-bottom:.7rem}
.pagehero h1 span{color:var(--gold);font-style:italic}
.pagehero p{color:#d7d9de;font-weight:300;max-width:640px;margin:0 auto}
.crumb{display:inline-flex;gap:.5rem;align-items:center;margin-top:1rem;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--gold-2)}
.crumb span{color:var(--muted)}

.prose{max-width:780px;margin:0 auto}
.prose p{color:var(--muted);font-weight:300;margin-bottom:1.2rem;font-size:1.05rem}
.prose h3{color:#fff;font-size:1.8rem;margin:2rem 0 .8rem}
.center{text-align:center}
.mt2{margin-top:2rem}
.section--tight{padding:4rem 0}
.bg-panel{background:#0c0c0e}

/* icon feature grid */
.feat{background:var(--panel);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius);padding:2rem 1.6rem;transition:transform .3s,border-color .3s}
.feat:hover{transform:translateY(-5px);border-color:var(--gold)}
.feat__ic{font-size:2rem;margin-bottom:.8rem}
.feat h3{color:#fff;font-size:1.4rem;margin-bottom:.5rem}
.feat p{color:var(--muted);font-weight:300;font-size:.95rem}

/* process steps */
.steps{counter-reset:step}
.step{position:relative;background:var(--panel);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius);padding:2rem 1.6rem 1.6rem;text-align:center}
.step__num{counter-increment:step;width:52px;height:52px;margin:0 auto 1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#141007;font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:700}
.step__num::before{content:counter(step)}
.step h3{color:#fff;font-size:1.3rem;margin-bottom:.4rem}
.step p{color:var(--muted);font-weight:300;font-size:.94rem}

/* service detail split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);width:100%;height:100%;object-fit:cover;max-height:460px}
.split__text p{color:var(--muted);font-weight:300;margin-bottom:1.3rem}

/* faq accordion */
.faq{max-width:840px;margin:0 auto}
.faq__item{border:1px solid rgba(255,255,255,.08);border-radius:12px;margin-bottom:1rem;overflow:hidden;background:var(--panel)}
.faq__q{width:100%;text-align:left;background:none;border:0;color:#fff;font-family:'Cormorant Garamond',serif;font-size:1.3rem;padding:1.3rem 1.5rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq__q .pm{color:var(--gold);font-size:1.6rem;transition:transform .3s;flex-shrink:0}
.faq__item.open .faq__q .pm{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq__a p{color:var(--muted);font-weight:300;padding:0 1.5rem 1.3rem}

/* pricing / info cards */
.pricecard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;text-align:center}
.pricecard h3{color:var(--gold-2);font-size:1.6rem;margin-bottom:.3rem}
.pricecard .price{font-family:'Cormorant Garamond',serif;font-size:2.4rem;color:#fff}
.pricecard .price small{font-size:.9rem;color:var(--muted)}
.pricecard ul{list-style:none;margin:1.2rem 0;text-align:left}
.pricecard li{padding-left:1.6rem;position:relative;margin-bottom:.6rem;color:#dfe0e4;font-weight:300;font-size:.95rem}
.pricecard li::before{content:"\2713";position:absolute;left:0;color:var(--gold)}

/* contact map/info */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.infoblock{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.6rem}
.infoblock .ic{font-size:1.4rem;margin-top:.2rem}
.infoblock h4{color:#fff;font-size:1.2rem;margin-bottom:.2rem}
.infoblock p,.infoblock a{color:var(--muted);font-weight:300}
.mapwrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);line-height:0}
.mapwrap iframe{width:100%;height:340px;border:0;filter:grayscale(.3) invert(.9) contrast(.9)}

.nav__link.active{color:var(--gold-2)}
.nav__link.active::after{width:100%}

@media (max-width:1024px){
  .split,.contactgrid{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
}
@media (max-width:760px){
  .pagehero{background-attachment:scroll;padding:6.5rem 0 3.5rem}
}