:root{--cream:#faf7ed;--ink:#18191b;--red:#de1732;--line:#e3ded1}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:6px}.first-screen{height:100vh;height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column}.header{height:clamp(90px,11.8vh,116px);padding:0 7.6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5;background:rgba(250,247,237,.94)}.brand{display:flex;flex-direction:column;align-items:center;white-space:nowrap}.brand>span{font-size:clamp(29px,2.7vw,44px);letter-spacing:-2.1px;line-height:1.1;font-weight:500}.brand small{font-size:12px;font-weight:600;letter-spacing:6px;margin-top:3px;padding-left:6px}.header nav{display:flex;gap:45px;align-items:center}.header nav a{font-size:22px;letter-spacing:-.6px;transition:color .2s}.header nav a:hover{color:var(--red)}.menu-toggle{display:none}.hero{height:calc(100% - clamp(90px,11.8vh,116px));position:relative;isolation:isolate;background:radial-gradient(ellipse at 70% 45%,#f0ddca 0%,#f8eee1 31%,transparent 64%),var(--cream)}.window-light{position:absolute;inset:0;overflow:hidden;z-index:-1;opacity:.55}.window-light:before{content:'';position:absolute;right:-12%;top:-36%;width:52%;height:140%;transform:skewY(-32deg);background:repeating-linear-gradient(0deg,transparent 0 165px,#cbb69a55 175px 194px,transparent 207px 285px),repeating-linear-gradient(90deg,transparent 0 260px,#baa78e55 274px 295px,transparent 312px 440px);filter:blur(12px);mask-image:linear-gradient(90deg,transparent,#000)}.hero-content{position:absolute;left:7.8%;top:24%;z-index:2}.hero h1{font-size:clamp(60px,6.6vw,108px);font-weight:500;line-height:.97;letter-spacing:-.065em;margin:0 0 24px}.hero h1>span{display:inline-block;color:var(--red);background:linear-gradient(105deg,#990022,#ef1837);background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}.hero-content p{font-size:clamp(24px,2.25vw,37px);line-height:1.15;letter-spacing:-1.2px;margin:0 0 36px}.button{display:inline-flex;align-items:center;justify-content:center;gap:29px;border-radius:21px;background:var(--red);color:#fff;padding:23px 35px;font-size:clamp(20px,1.8vw,29px);letter-spacing:-.65px;transition:background .2s,transform .2s}.button:hover{background:#bd102b;transform:translateY(-2px)}.button svg{width:32px;height:26px;stroke:currentColor;stroke-width:1.6;flex-shrink:0}.portrait{position:absolute;inset:0;z-index:1;pointer-events:none;mask-image:linear-gradient(#000 0%,#000 82%,transparent 100%)}.portrait img{position:absolute;height:129%;width:auto;max-width:none;right:-3%;top:-4%;object-fit:contain}.signature{position:absolute;right:15.8%;bottom:3.3%;text-align:center;z-index:3;font-size:21px;letter-spacing:-.7px}.signature small{display:block;font-size:14px;letter-spacing:3px;margin-top:4px}
@media(min-width:1800px){.portrait img{right:2%}.hero-content{top:23%}}
@media(max-width:1100px) and (min-width:701px){.header nav{gap:25px}.header nav a{font-size:18px}.hero-content{left:6%;top:25%}.hero h1{font-size:6.7vw}.hero-content p{font-size:2.4vw}.portrait img{right:-15%}.signature{right:10%}.button{padding:21px 26px}.header{padding:0 6%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.availability{width:min(740px,48vw);margin-bottom:28px}
.availability-notice{display:flex;align-items:center;gap:20px;padding:20px 23px;background:#fcf0eb;border-radius:16px;color:#101820}
.availability-icon{display:flex;align-items:center;align-self:stretch;flex-shrink:0;width:56px;padding-right:20px;border-right:1px solid #aaa5a1}
.availability-icon svg{width:36px;height:40px;overflow:visible;stroke:#ff003c;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.availability-notice h2{margin:0;font-size:18px;font-weight:400;line-height:1.4;letter-spacing:-.5px}
.hero-content .availability-copy{margin:21px 0 0;font-size:17px;line-height:1.5;letter-spacing:-.35px}

/* Desktop and landscape tablets: content and portrait have their own columns. */
@media (min-width: 701px) and (orientation: landscape), (min-width: 1001px) {
  .header { flex: 0 0 auto; height: clamp(58px, 11dvh, 106px); padding: 0 6%; gap: 24px; }
  .brand > span { font-size: clamp(25px, 2.7vw, 44px); }
  .brand small { font-size: clamp(8px, .75vw, 12px); letter-spacing: clamp(3px, .38vw, 6px); }
  .header nav { gap: clamp(18px, 2.8vw, 45px); }
  .header nav a { font-size: clamp(16px, 1.4vw, 22px); }
  .hero { flex: 1; height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding: 0 6% max(12px, 2dvh); column-gap: 1.5vw; }
  .hero-content { position: relative; inset: auto; grid-column: 1; grid-row: 1 / 3; align-self: center; min-width: 0; padding: 12px 0; }
  .hero h1 { font-size: clamp(36px, min(6.3vw, 11dvh), 112px); margin-bottom: clamp(12px, 2.4dvh, 24px); }
  .hero h1 > span { margin-bottom: clamp(3px, .8dvh, 8px); }
  .availability { width: 100%; max-width: 740px; margin-bottom: clamp(12px, 2.8dvh, 28px); }
  .availability-notice { padding: clamp(12px, 2dvh, 20px); gap: clamp(12px, 1.3vw, 20px); }
  .availability-notice h2 { font-size: clamp(14px, min(1.2vw, 2.7dvh), 18px); }
  .availability-icon { width: 44px; padding-right: 14px; }
  .availability-icon svg { width: 30px; }
  .hero-content .availability-copy { font-size: clamp(13px, min(1.15vw, 2.5dvh), 17px); margin-top: clamp(10px, 2dvh, 21px); }
  .button { font-size: clamp(17px, min(1.8vw, 3.2dvh), 29px); min-height: 44px; padding: clamp(10px, 2.4dvh, 23px) clamp(20px, 2.2vw, 35px); }
  .portrait { position: relative; inset: auto; grid-column: 2; grid-row: 1; min-height: 0; overflow: hidden; mask-image: linear-gradient(#000 0%, #000 85%, transparent 100%); }
  .portrait img { height: min(123%, 58vw); width: auto; top: 0; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
  .signature { position: relative; inset: auto; grid-column: 2; grid-row: 2; text-align: center; font-size: clamp(14px, 1.3vw, 21px); }
  .signature small { font-size: clamp(10px, .9vw, 14px); }
}
@media (min-width: 1001px) and (max-height: 500px) {
  .hero h1 { font-size: min(5vw, 9dvh); margin-bottom: 8px; }
  .availability { margin-bottom: 10px; }
  .availability-notice { padding: 9px 12px; }
  .hero-content .availability-copy { margin-top: 8px; line-height: 1.35; }
}
/* A single viewport, with the portrait using the space left by the content. */
@media (max-width: 700px), (max-width: 1400px) and (orientation: portrait), (max-height: 500px) and (max-width: 1000px) {
  .first-screen { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
  .header { height: auto; flex: 0 0 auto; min-height: 64px; padding: max(10px, env(safe-area-inset-top)) 5% 10px; }
  .brand > span { font-size: 27px; letter-spacing: -1.4px; }
  .brand small { font-size: 8px; letter-spacing: 3.8px; }
  .menu-toggle { display: flex; width: 44px; height: 44px; border: 0; background: transparent; flex-direction: column; justify-content: center; gap: 7px; padding: 9px; }
  .menu-toggle span { height: 2px; background: var(--ink); width: 26px; transition: transform .2s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 12px 5%; background: var(--cream); border-bottom: 1px solid var(--line); gap: 4px 20px; flex-wrap: wrap; }
  .header nav.is-open { display: flex; }
  .header nav a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
  .hero { height: auto; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 0 5% max(8px, env(safe-area-inset-bottom)); }
  .hero-content { position: relative; inset: auto; grid-column: auto; grid-row: auto; align-self: auto; padding-top: clamp(10px, 2dvh, 22px); min-width: 0; }
  .hero h1 { font-size: clamp(29px, 8.3vw, 55px); line-height: 1; letter-spacing: -.065em; margin: 0 0 clamp(10px, 1.8dvh, 18px); }
  .hero h1 > span { margin-bottom: 3px; }
  .availability { width: 100%; margin-bottom: clamp(10px, 1.7dvh, 18px); }
  .availability-notice { gap: 12px; padding: clamp(10px, 1.6dvh, 16px); border-radius: 14px; }
  .availability-icon { width: 39px; padding-right: 11px; }
  .availability-icon svg { width: 27px; height: 34px; }
  .availability-notice h2 { font-size: clamp(13px, 3.5vw, 16px); line-height: 1.35; letter-spacing: -.3px; }
  .hero-content .availability-copy { font-size: clamp(12px, 3.3vw, 15px); line-height: 1.4; letter-spacing: -.2px; margin: clamp(9px, 1.5dvh, 15px) 0 0; }
  .button { width: 100%; min-height: 46px; padding: 12px 18px; font-size: 17px; border-radius: 14px; gap: 20px; }
  .button svg { width: 26px; height: 22px; }
  .portrait { position: relative; inset: auto; grid-column: auto; grid-row: auto; min-height: 0; overflow: hidden; margin-top: 5px; mask-image: linear-gradient(#000 0%, #000 83%, transparent 100%); }
  .portrait img { height: 125%; width: auto; max-width: none; top: 0; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
  .signature { position: relative; inset: auto; grid-column: auto; grid-row: auto; text-align: center; font-size: 14px; line-height: 1.2; letter-spacing: -.3px; }
  .signature small { font-size: 9px; letter-spacing: 2px; margin-top: 3px; }
  .window-light:before { width: 100%; right: -20%; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .header { min-height: 56px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .brand > span { font-size: 24px; }
  .hero-content { padding-top: 10px; }
  .hero h1 { font-size: min(8.1vw, 36px); margin-bottom: 10px; }
  .availability-notice { padding: 10px; }
  .availability-notice h2 { font-size: 13px; }
  .hero-content .availability-copy { font-size: 12px; margin-top: 9px; }
  .availability { margin-bottom: 10px; }
  .button { font-size: 15px; padding: 10px 14px; }
}
@media (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
  .header { min-height: 52px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .brand > span { font-size: 23px; }
  .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 18px; }
  .hero-content { grid-column: 1; grid-row: 1 / 3; align-self: center; padding: 5px 0; }
  .hero h1 { font-size: clamp(25px, 4.6vw, 40px); margin-bottom: 8px; }
  .hero h1 br { display: none; }
  .hero h1 > span { margin-right: .15em; }
  .availability-notice { padding: 8px; gap: 8px; }
  .availability-notice h2 { font-size: 12px; }
  .availability-icon { width: 32px; padding-right: 7px; }
  .hero-content .availability-copy { font-size: 12px; margin-top: 7px; }
  .availability { margin-bottom: 8px; }
  .button { font-size: 15px; padding: 8px 12px; min-height: 44px; }
  .portrait { grid-column: 2; grid-row: 1; height: 100%; margin: 0; }
  .signature { grid-column: 2; grid-row: 2; font-size: 12px; }
}

@media (min-width: 701px) and (max-width: 1400px) and (orientation: portrait) {
  .header { min-height: 76px; }
  .brand > span { font-size: 32px; }
  .hero-content { padding-top: clamp(20px, 3dvh, 36px); }
  .hero h1 { font-size: clamp(50px, 7vw, 80px); }
  .availability-notice h2 { font-size: 18px; }
  .hero-content .availability-copy { font-size: 16px; }
  .button { width: auto; font-size: 20px; padding: 15px 24px; }
  .signature { font-size: 18px; }
  .signature small { font-size: 12px; }
}
/* Phone composition follows the supplied portrait reference. */
.menu-toggle:disabled { opacity: 1; cursor: default; }
@media (max-width: 700px) and (orientation: portrait) {
  .header { min-height: 0; height: 10dvh; padding: env(safe-area-inset-top) 10% 0; border-bottom: 0; background: transparent; }
  .brand > span { font-size: clamp(21px, 4.8vw, 33px); letter-spacing: -.9px; }
  .brand small { font-size: clamp(6px, 1.4vw, 9px); letter-spacing: 3.4px; margin-top: 4px; }
  .menu-toggle { width: 34px; height: 44px; padding: 5px; gap: 6px; }
  .menu-toggle span, .menu-toggle:after { width: 25px; height: 2px; background: var(--ink); }
  .menu-toggle:after { content: ''; }
  .hero { display: block; padding: 0; background: radial-gradient(ellipse at 72% 74%, #f0ddca 0%, #f8eee1 28%, transparent 65%), var(--cream); }
  .hero-content { padding: 2.4dvh 0 0; margin: 0 10%; }
  .hero h1 { font-size: clamp(30px, 10.5vw, 70px); line-height: .98; letter-spacing: -.065em; margin: 0 0 2.5dvh; }
  .hero h1 > span { margin-bottom: 5px; }
  .availability { margin-bottom: 2.6dvh; max-width: none; }
  .availability-notice { gap: 12px; padding: 1.8dvh 14px; border-radius: 13px; background: #fcf0eb; }
  .availability-icon { width: 34px; padding-right: 10px; }
  .availability-icon svg { width: 23px; height: 30px; }
  .availability-notice h2 { font-size: clamp(11px, 3.15vw, 20px); line-height: 1.4; letter-spacing: -.25px; }
  .hero-content .availability-copy { margin-top: 1.8dvh; font-size: clamp(11px, 3.3vw, 21px); line-height: 1.4; letter-spacing: -.2px; }
  .button { width: auto; min-height: 44px; padding: 1.5dvh 20px; font-size: clamp(14px, 4vw, 25px); gap: 18px; border-radius: 12px; }
  .button svg { width: 23px; height: 20px; }
  .portrait { position: absolute; inset: auto 0 1dvh; width: 100%; height: 47%; max-height: none; margin: 0; mask-image: linear-gradient(#000 0%, #000 83%, transparent 100%); }
  .portrait img { height: 118%; width: auto; top: 0; right: -10%; left: auto; transform: none; }
  .signature { position: absolute; inset: auto auto 7dvh 10%; padding: 0; text-align: left; font-size: clamp(11px, 3vw, 19px); letter-spacing: -.4px; }
  .signature small { font-size: clamp(8px, 1.9vw, 12px); letter-spacing: 2px; margin-top: 5px; }
  .window-light { opacity: .2; }
}
@media (max-width: 700px) and (orientation: portrait) and (max-height: 620px) {
  .hero-content { padding-top: 1.5dvh; }
  .hero h1 { font-size: 9.8vw; margin-bottom: 2dvh; }
  .availability-notice { padding-top: 1.4dvh; padding-bottom: 1.4dvh; }
  .availability { margin-bottom: 1.8dvh; }
  .hero-content .availability-copy { margin-top: 1.4dvh; }
  .portrait { height: 43%; }
}