/* Doors to Luxury — site styles */
:root{
  /* Palette from the Doors to Luxury brandbook */
  --ivory:#f7f2e9;--ivory-2:#F3ECDF;--sand:#e9e6dc;--paper:#FDF8F0;--art:#fdfbf4;--sage:#9AA6A0;--brand-teal:#154E55;
  --teal:#1f6b74;--teal-deep:#17454e;--teal-door:#215760;--teal-wash:rgba(31,107,116,0.10);
  --gold:#b08d4c;--gold-soft:#9a7b3f;--brass:#e2c98f;--ink:#233d43;--muted:#5a6b6e;
  --line:#d9d2c4;--line-teal:rgba(31,107,116,0.22);
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--serif);font-size:13px;letter-spacing:0.35em;text-transform:uppercase;color:var(--gold-soft)}
.btn{display:inline-block;border:0.5px solid var(--gold);color:#6b531f;padding:15px 36px;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;background:transparent;cursor:pointer;transition:background .5s ease,color .5s ease}
.btn:hover{background:var(--gold);color:var(--paper)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;overflow:hidden;background:linear-gradient(168deg,var(--ivory) 0%,var(--ivory-2) 45%,var(--sand) 100%)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 85% at 50% 25%, rgba(255,255,255,0.7), rgba(255,255,255,0) 55%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top, var(--teal-wash), rgba(31,107,116,0))}
.hero-inner{position:relative;z-index:4;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px 28px 90px}
.hero-logo{display:block;width:clamp(210px,28vw,330px);height:auto;margin:0 auto 2.6rem}
.hero h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,5.4vw,60px);line-height:1.14;color:var(--ink);margin-bottom:1.3rem;max-width:14ch}
.hero .sub{color:var(--muted);font-size:clamp(15px,1.6vw,18px);max-width:46ch;margin-bottom:2.6rem}
.hero .intro-block{max-width:60ch;margin:0 auto 2.8rem}
.hero .intro-block .lead-eyebrow{margin-bottom:1.2rem}
.hero .intro-block p{color:var(--muted);font-size:17px;line-height:1.85}
.places{margin-bottom:2.8rem;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--teal);letter-spacing:0.02em}
.places span{color:var(--sage);font-style:normal;margin:0 12px}

/* ---------- DOORS ----------
   The doors sit ABOVE everything (z-index 100), so on load the visitor sees
   only the closed doors. They open with a pure-CSS animation: no JavaScript
   is needed, so the page can never get stuck behind closed doors.
   After opening they are hidden completely. */
.door,.glow{position:fixed;top:0;height:100vh;height:100dvh}
.door{width:50vw;z-index:100;animation-duration:1.9s;animation-delay:1.6s;animation-timing-function:cubic-bezier(0.65,0,0.2,1);animation-fill-mode:forwards}
.door{overflow:hidden;background-color:var(--brand-teal);background-image:url(../images/brand/door-pattern.svg);background-size:150px 160px}
.door-left{left:0;transform-origin:left center;background-position:right top;box-shadow:inset -22px 0 50px rgba(0,0,0,0.30);animation-name:doorLeft}
.door-right{right:0;transform-origin:right center;background-position:left top;box-shadow:inset 22px 0 50px rgba(0,0,0,0.30);animation-name:doorRight}
.door .frame{position:absolute;inset:14px;border:1px solid rgba(206,176,110,0.38)}
.door-left .frame{right:0;border-right:0}
.door-right .frame{left:0;border-left:0}
/* Logo sits ON TOP of both doors as one piece, and fades out
   before the doors start to move, so it never splits or overlaps. */
.door-logo{position:fixed;left:50%;top:46%;z-index:102;width:clamp(230px,34vw,400px);height:auto;transform:translate(-50%,-50%);pointer-events:none;animation:logoOut .45s ease 1.2s forwards}
@keyframes logoOut{to{opacity:0;visibility:hidden}}
.door .knob{position:absolute;top:68%;width:8px;height:54px;border-radius:4px;background:linear-gradient(#f4e7bb,#ac8842);box-shadow:0 0 8px rgba(0,0,0,0.3)}
.door-left .knob{right:22px}
.door-right .knob{left:22px}
.glow{left:50%;width:4px;transform:translateX(-50%);z-index:101;pointer-events:none;background:linear-gradient(to bottom, rgba(255,246,222,0), rgba(255,246,222,0.95), rgba(255,246,222,0));filter:blur(4px);opacity:0;animation:seam 2.4s ease 1.1s forwards}
@keyframes doorLeft{from{transform:perspective(1700px) rotateY(0)}to{transform:perspective(1700px) rotateY(-112deg);visibility:hidden}}
@keyframes doorRight{from{transform:perspective(1700px) rotateY(0)}to{transform:perspective(1700px) rotateY(112deg);visibility:hidden}}
@keyframes seam{0%{opacity:0}25%{opacity:1}50%{opacity:1}100%{opacity:0;visibility:hidden}}
/* Visitor already saw the doors this visit (e.g. reloaded the page) — skip them */
.doors-seen .door,.doors-seen .glow,.doors-seen .door-logo{display:none}

.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;color:var(--muted);font-size:11px;letter-spacing:0.25em;text-transform:uppercase;opacity:0;animation:fadeIn 1s ease 3.4s forwards}
.doors-seen .scroll-cue{animation-delay:.4s}
.scroll-cue span{display:block;width:1px;height:32px;background:var(--line-teal);margin:9px auto 0}
@keyframes fadeIn{to{opacity:1}}

/* ---------- SERVICES ---------- */
section{padding:clamp(80px,12vw,140px) 0}
.services{background:var(--ivory-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.services .head{text-align:center;margin-bottom:clamp(48px,7vw,78px)}
.services .head .eyebrow{margin-bottom:1.3rem}
.services .head h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,46px)}
.cluster{margin-bottom:clamp(48px,6vw,72px)}
.cluster:last-child{margin-bottom:0}
.cluster-label{display:flex;align-items:center;gap:20px;margin-bottom:2rem}
.cluster-label .k{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold-soft);white-space:nowrap;text-transform:uppercase;letter-spacing:0.2em}
.cluster-label .rule{flex:1;height:1px;background:var(--line)}
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);display:flex;flex-direction:column}
/* Illustrations are 4:3 — the frame keeps that ratio so nothing gets cropped */
.card-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--art);border-bottom:1px solid var(--line)}
.card-visual img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:clamp(26px,3vw,36px)}
.card h3{font-family:var(--serif);font-weight:500;font-size:25px;margin-bottom:0.7rem;color:var(--ink)}
.card p{color:var(--muted);font-size:15px}
/* Single wide card (Delegation Visits): image left, text right */
.cards.feature{grid-template-columns:1fr}
.card.wide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.card.wide .card-visual{aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
.card.wide .card-visual::before{content:"";display:block;padding-top:75%}
.card.wide .card-visual img{position:absolute;inset:0}
.card.wide .card-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,56px)}
.card.wide h3{font-size:30px}
.card.wide p{font-size:16px}
.card.wide p + p{margin-top:1rem}
.card .trust{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:18px;color:var(--teal)}

/* ---------- CONTACT ---------- */
.contact{background:var(--paper);text-align:center}
.contact .eyebrow{margin-bottom:1.5rem}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,46px);margin-bottom:1.1rem}
.contact .lead{color:var(--muted);max-width:48ch;margin:0 auto 3rem;font-size:17px}
form{max-width:520px;margin:0 auto;text-align:left}
.field{margin-bottom:1.3rem}
label{display:block;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:0.55rem}
input,textarea{width:100%;background:var(--ivory);border:1px solid var(--line);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:15px;padding:14px 16px;transition:border-color .3s ease}
input:focus,textarea:focus{outline:none;border-color:var(--teal)}
textarea{resize:vertical;min-height:130px}
form .btn{width:100%;margin-top:0.5rem;font-family:var(--sans)}
.form-note{margin-top:1.3rem;font-size:14px;color:var(--muted);text-align:center;min-height:1.2em}
.or{margin-top:2.6rem;color:var(--muted);font-size:15px}
.or a{color:var(--teal);border-bottom:1px solid var(--line-teal);padding-bottom:2px}

/* ---------- FOOTER ---------- */
footer{background-color:var(--brand-teal);background-image:url(../images/brand/door-pattern.svg);background-size:150px 160px;background-position:center top;padding:64px 0 44px;text-align:center}
footer .footer-logo{display:block;width:min(300px,78vw);height:auto;margin:0 auto 1.4rem}
footer p{color:#b7cdcf;font-size:13px;letter-spacing:0.06em}
footer .legal{margin:1.8rem auto 0;padding-top:1.4rem;border-top:1px solid rgba(169,194,197,0.18);max-width:62ch;font-size:12px;letter-spacing:0.03em;line-height:1.8;color:#9fbcbf}
footer .legal strong{font-weight:400;color:#c9dadc}

@media(max-width:820px){
  .cards.three,.cards.two{grid-template-columns:1fr}
  .card.wide{grid-template-columns:1fr}
  .card.wide .card-visual{border-right:0;border-bottom:1px solid var(--line)}
  .places span{margin:0 7px}
  .cluster-label .k{white-space:normal;letter-spacing:0.14em}
}
@media(prefers-reduced-motion:reduce){
  .door,.glow,.door-logo{display:none}
  .scroll-cue{animation:none;opacity:1}
  html{scroll-behavior:auto}
}