/* ==========================================================================
   MEDIUM RARE SHOWROOM: home page
   Sits on top of css/site.css, which is the Medium Rare Distribution
   stylesheet, unchanged. Only what Showroom adds or resizes lives here.
   ========================================================================== */

/* ---- Header -------------------------------------------------------------- */
.bar-cta{display:flex;align-items:center;gap:10px}
/* sub-line: capitals, centred under the wordmark, no waves */
.lk-sub{justify-content:center}
.lk-dist{text-transform:uppercase;letter-spacing:.3em;margin-right:-.3em}
.lockup .lk-sub{margin-top:calc(var(--lk-w) * .045)}
.lockup .lk-dist{font-size:calc(var(--lk-w) * .068)}

/* ---- Hero: three statements, one to a line -------------------------------- */
.sr-hero h1{max-width:none}
.hero-sentence.sr-sentence{font-size:clamp(34px,5.3vw,80px);line-height:1.22;letter-spacing:-.035em}
.sr-sentence .ln{display:block}
.sr-sentence .stamp-wrap .stamp{height:.74em}
.sr-sentence .sr-uni{display:inline-block;height:.9em;width:auto;vertical-align:middle}
.sr-lead{margin-top:clamp(24px,3.2vh,40px);max-width:33em}
.sr-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(22px,3vh,34px)}
.sr-cta .free{font-size:15px;color:var(--ink-soft);margin-left:6px}

/* the watch on the first stamp keeps Dubai time */
.st-dial .stamp-face{background:var(--stamp);box-shadow:inset 0 0 0 1px var(--rule)}
.dial{position:absolute;inset:0;width:100%;height:100%}
.dial .strap{fill:var(--paper-2);stroke:var(--oxblood);stroke-width:1.6}
.dial .case{fill:var(--stamp);stroke:var(--oxblood);stroke-width:2.6}
.dial .ring{fill:none;stroke:var(--oxblood);stroke-width:.9;opacity:.55}
.dial .tk{stroke:var(--oxblood);stroke-width:1.5;stroke-linecap:round}
.dial .tk.q{stroke-width:2.6}
.dial .crown{fill:var(--oxblood)}
.dial .hh,.dial .mm{stroke:var(--ink);stroke-linecap:round;transform-origin:70px 50px;transition:transform 900ms var(--ease-out)}
.dial .hh{stroke-width:3.4;transform:rotate(var(--h,305deg))}
.dial .mm{stroke-width:2.2;transform:rotate(var(--m,60deg))}
.dial .pin{fill:var(--rust)}

/* ---- Proof ---------------------------------------------------------------- */
/* the retailer logos sit on the lightest shade, full width, to break up the page */
.band-light{background:var(--stamp)}
.band-light .carry{border-top:0;padding-block:clamp(44px,5vw,80px) clamp(48px,5.4vw,84px)}
@media (hover:hover) and (pointer:fine){.band-light .cell:hover{background:rgba(238,220,209,.5)}}
.carry .proof-note{margin-left:calc(clamp(110px,11vw,160px) + 20px);max-width:44em}
.facts-note .ul{white-space:nowrap}
.facts{max-width:17em}
.odo .sep{display:inline-block;line-height:1.08em}
@media (max-width:640px){.facts{font-size:clamp(25px,7.2vw,44px)}.facts .f{display:block;white-space:normal}}

/* ---- Two sides ------------------------------------------------------------ */
.gap-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,96px);align-items:end}
.gap-head .lead{max-width:30em}
.sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(28px,5vw,96px);margin-top:clamp(36px,4vw,64px)}
.sides li{border-top:2px solid var(--ink);padding-top:26px}
.side-k{font:600 12px/1 var(--text);letter-spacing:.28em;text-transform:uppercase;color:var(--rust)}
.sides .h-way{margin:16px 0 16px;max-width:13em}
.sides p{font-size:18px;max-width:31em;text-wrap:pretty}
.sides .go{display:inline-block;margin-top:18px;font-weight:600}

/* ---- How it works: reuses the house menu; icons from the shared set -------- */
.hw .hw-cta a{white-space:nowrap}

/* ---- Cost ----------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(20px,2.4vw,36px);margin-top:clamp(32px,3.6vw,56px)}
.plan{position:relative;background:var(--stamp);border-radius:14px;padding:clamp(24px,2.6vw,38px);box-shadow:inset 0 0 0 1px var(--rule)}
.plan-k{font:600 12px/1.45 var(--text);letter-spacing:.28em;text-transform:uppercase;color:var(--rust)}
.plan-p{font-family:var(--display);font-weight:720;font-stretch:112%;font-size:clamp(40px,4.6vw,72px);line-height:.95;letter-spacing:-.045em;color:var(--oxblood);margin-top:14px}
.plan-p small{font-family:var(--text);font-weight:500;font-size:17px;letter-spacing:0;color:var(--ink-soft);margin-left:.5em;white-space:nowrap}
.plan ul{margin-top:22px;display:grid;gap:10px}
.plan li{position:relative;padding-left:26px;font-size:17px;line-height:1.45}
.plan li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:9px;background:var(--oxblood);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 4.6 5 8l8-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 4.6 5 8l8-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .btn{margin-top:26px}
.plan-terms{width:100%;margin-top:22px;border-collapse:collapse;font-size:17px;line-height:1.35}
.plan-terms caption{caption-side:top;text-align:left;font-size:15px;color:var(--ink-soft);padding-bottom:10px}
.plan-terms th,.plan-terms td{padding:11px 0;border-top:1px solid var(--rule);text-align:left;vertical-align:baseline;font-weight:400}
.plan-terms tr:last-child th,.plan-terms tr:last-child td{border-bottom:1px solid var(--rule)}
.plan-terms th{white-space:nowrap;padding-right:14px}
.plan-terms .t-tot{font-family:var(--display);font-weight:700;font-stretch:108%;letter-spacing:-.02em;color:var(--oxblood);white-space:nowrap;padding-right:14px}
.plan-terms .t-eq{color:var(--ink-soft);text-align:right}
.plan-terms .t-eq b{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--oxblood);color:var(--stamp);font:600 12px/1.5 var(--text);letter-spacing:.04em;white-space:nowrap}
.plan-terms + ul{margin-top:20px}

/* ---- Questions ------------------------------------------------------------ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px clamp(40px,6vw,104px);align-items:start}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:660;font-stretch:108%;font-size:clamp(20px,1.7vw,25px);line-height:1.15;letter-spacing:-.025em;color:var(--ink);transition:color 160ms ease;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:16px;height:16px;background:var(--oxblood);transition:transform 260ms var(--ease-out);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.faq details[open] summary{color:var(--oxblood)}
.faq details[open] summary::after{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--oxblood)}}
.faq details p{padding:0 44px 22px 0;max-width:36em;text-wrap:pretty}

/* ---- Two doors: each one a stamp you can press ---------------------------- */
.doors-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,48px);margin-top:clamp(32px,3.6vw,56px)}
.door{display:block;text-decoration:none;color:var(--ink);transform:rotate(var(--tilt,-1.2deg));transition:transform 320ms var(--ease-out);-webkit-tap-highlight-color:transparent}
.door .stamp-wrap{display:block;filter:drop-shadow(0 12px 16px rgba(59,10,6,.16)) drop-shadow(0 2px 3px rgba(59,10,6,.18))}
.door .stamp{display:block;--r:5px;--t:15px;--pad:11px}
.door .stamp-face{display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:auto;padding:clamp(24px,3vw,44px);background:var(--stamp);box-shadow:inset 0 0 0 1.5px var(--oxblood)}
.door-k{font:600 12px/1 var(--text);letter-spacing:.28em;text-transform:uppercase;color:var(--rust)}
.door-t{font-family:var(--display);font-weight:720;font-stretch:112%;font-size:clamp(40px,5.2vw,84px);line-height:.92;letter-spacing:-.045em;color:var(--oxblood)}
.door-s{font-size:17px;line-height:1.45;color:var(--ink-soft);max-width:24em}
.door-go{margin-top:8px;font-weight:600;color:var(--oxblood);background:linear-gradient(currentColor,currentColor) 0 100%/0% 1.5px no-repeat;padding-bottom:3px;transition:background-size 280ms var(--ease-out)}
.door-v{position:absolute;top:clamp(20px,2.6vw,36px);right:clamp(20px,2.6vw,36px);font-family:var(--display);font-weight:680;font-stretch:112%;font-size:clamp(18px,1.7vw,26px);letter-spacing:-.02em;color:var(--rust)}
.door:active{transform:rotate(var(--tilt,-1.2deg)) scale(.985)}
@media (hover:hover) and (pointer:fine){
  .door:hover{transform:rotate(0deg) translateY(-6px)}
  .door:hover .door-go{background-size:100% 1.5px}
}
.doors-foot{margin-top:28px}

/* ---- Footer --------------------------------------------------------------- */
.foot .sr-foot .ln{display:block}
.foot .sr-foot{max-width:none}
.fm-words .lk-sub{margin-top:0}
.fm-words .lk-dist{font-size:clamp(15px,2.1vw,33px)}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:1080px){
  .faq-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .gap-head,.sides,.plans,.doors{grid-template-columns:1fr}
  .door,.door:active{transform:none}
}
@media (max-width:640px){
  /* long phrases must be able to wrap on small screens, so the rule becomes a plain underline */
  .hero-sentence.sr-sentence{font-size:clamp(32px,8.9vw,54px);line-height:1.2}
  .sr-sentence .ln+.ln{margin-top:.14em}
  .sr-sentence .s-link{white-space:normal}
  .sr-sentence .s-txt{padding-bottom:0;text-decoration:underline;text-decoration-thickness:.055em;text-underline-offset:.13em;text-decoration-skip-ink:none}
  .sr-sentence .s-txt::before,.sr-sentence .s-txt::after{display:none}
  .sr-sentence .slot{white-space:nowrap}
  .foot .sr-foot{font-size:clamp(26px,7.2vw,44px);line-height:1.25}
  .foot .sr-foot .s-link{white-space:normal}
  .foot .sr-foot .s-txt{padding-bottom:0;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.14em;text-decoration-skip-ink:none}
  .foot .sr-foot .s-txt::before,.foot .sr-foot .s-txt::after{display:none}
}
@media (max-width:560px){
  .bar-cta .btn.ghost{display:none}
  .carry .proof-note{margin-left:0}
  .faq details p{padding-right:0}
  .sr-cta .btn{flex:1 1 auto}
  .sr-cta .free{flex-basis:100%;margin-left:0}
}