/* ReMarque prototype: styles shared by every page (extracted from the homepage). */

@font-face{font-family:"Switzer";src:url(../fonts/switzer-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url(../fonts/caveat-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Dancing Script";src:url(../fonts/dancing-script-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Chillax";src:url(../fonts/chillax-var.woff2) format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"Boska";src:url(../fonts/boska-var-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@view-transition{navigation:auto}
/* ReMarque v5. Monochrome night: black, white, and cold "studio light" (ice blue) used only as light, never as fill.
   Shapes: 2px corners at most. Fonts: Switzer (variable 100 to 900) + Boska Italic for single accent words. */
:root{
  --black:#060607;--ink:#0b0b0d;--panel:#111114;--white:#f4f4f2;--soft:#b9b9bf;--dim:#7b7b84;
  --line:rgba(244,244,242,.12);--line-2:rgba(244,244,242,.22);--ice:#cfe1ff;
  --sans:"Switzer",ui-sans-serif,system-ui,sans-serif;--serif:"Boska",Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1);--z-nav:40;--z-intro:100;--z-modal:80
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--black);color:var(--white);font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 32px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--white);color:var(--black);padding:10px 14px}
.skip:focus{top:16px}
em.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;padding-right:.05em}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);transition:background-color .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
.nav.solid{background:rgba(6,6,7,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.nav .wrap{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.nav .l,.nav .r{display:flex;align-items:center;gap:30px;font-size:.94rem;color:var(--soft)}
.nav .r{justify-self:end}
.nav a.t{position:relative;transition:color .3s}
.nav a.t::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--white);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a.t:hover{color:var(--white)}
.nav a.t:hover::after{transform:scaleX(1);transform-origin:left}
.wm{font-size:1.5rem;font-weight:620;letter-spacing:-.045em;color:var(--white)}
.wm .it{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.02em}

/* ---------- buttons with press feedback ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:2px;font-weight:560;font-size:.98rem;letter-spacing:.005em;white-space:nowrap;transition:transform .25s var(--ease),background-color .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.solid{background:var(--white);color:var(--black)}
.btn.solid:hover{background:var(--ice)}
.btn.line{border:1px solid var(--line-2);color:var(--white)}
.btn.line:hover{border-color:var(--white)}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.nav .btn{height:40px;padding:0 16px;font-size:.88rem}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.25;transform:scale(0);animation:ripple .6s var(--ease) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}

.label{display:inline-flex;align-items:center;gap:14px;font-size:.74rem;font-weight:520;letter-spacing:.26em;text-transform:uppercase;color:var(--soft)}
.label::before,.label::after{content:"";width:28px;height:1px;background:var(--line-2)}
/* ---------- shared section heads ---------- */
.head{display:flex;flex-direction:column;align-items:center;text-align:center}
.head h2{margin-top:18px;font-size:clamp(2.6rem,5.6vw,5.2rem);line-height:.98;letter-spacing:-.05em;font-weight:560}
.head p{margin-top:20px;max-width:50ch;color:var(--soft);font-size:1.08rem}
.rv{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
}

.filters{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.filters button{height:40px;padding:0 16px;border:1px solid var(--line);border-radius:2px;font-size:.9rem;color:var(--soft);transition:border-color .25s,color .25s,background-color .25s,transform .2s}
.filters button:hover{border-color:var(--line-2);color:var(--white)}
.filters button:active{transform:scale(.97)}
.filters button[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:var(--black)}
.filters button span{opacity:.55;margin-left:6px;font-variant-numeric:tabular-nums}
.browser{border:1px solid var(--line-2);background:var(--panel);view-transition-name:featured}
.browser .bar{height:40px;display:grid;grid-template-columns:90px 1fr 90px;align-items:center;padding:0 14px;border-bottom:1px solid var(--line)}
.browser .dots{display:flex;gap:7px}
.browser .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.browser .url{justify-self:center;font-size:.78rem;color:var(--dim);letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.browser .url b{font-weight:500;color:var(--soft)}
.browser .tag{justify-self:end;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.viewport{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;cursor:ns-resize}
.viewport img{width:100%;height:auto;transform:translateY(0);transition:transform .8s var(--ease);will-change:transform}
.viewport .hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(6,6,7,.75);border:1px solid var(--line-2);padding:8px 12px;color:var(--soft);pointer-events:none;transition:opacity .3s}
.viewport.scrolling .hint{opacity:0}
.meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-top:22px}
.meta .name{font-size:1.5rem;letter-spacing:-.03em;font-weight:560}
.meta .name em.it{color:var(--ice)}
.meta .kind{font-size:.86rem;color:var(--dim)}
.meta .acts{justify-self:end;display:flex;gap:10px}
.meta .btn{height:42px;padding:0 16px;font-size:.88rem}
/* ---------- closing invitation: full-bleed again ---------- */
.cta{position:relative;isolation:isolate;overflow:hidden;min-height:86vh;display:grid;place-items:center;padding:140px 0}
.cta .bgx{position:absolute;inset:-10%;z-index:-2;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;transform:rotate(-6deg) scale(1.05)}
.cta .bgx img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.5}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(6,6,7,.93),rgba(6,6,7,.72)),linear-gradient(180deg,var(--black),transparent 25%,transparent 75%,var(--black))}
.cta .in{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta h2{margin-top:20px;font-size:clamp(3rem,7.4vw,7rem);line-height:.96;letter-spacing:-.055em;font-weight:560;max-width:12ch}
.cta h2 em.it{color:var(--ice)}
.cta p{margin-top:24px;max-width:46ch;color:var(--soft);font-size:1.1rem}
.cta .ctas{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta .direct{margin-top:30px;display:flex;gap:28px;flex-wrap:wrap;justify-content:center;font-size:.95rem;color:var(--soft)}
.cta .direct a:hover{color:var(--white)}

footer{border-top:1px solid var(--line);padding:46px 0 54px}
footer .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;font-size:.86rem;color:var(--dim)}
footer .wm{font-size:1.25rem;justify-self:center}
footer .r{justify-self:end}

/* ---------- preview modal ---------- */
dialog.pv{z-index:var(--z-modal);border:1px solid var(--line-2);padding:0;margin:auto;width:min(1240px,96vw);height:min(92vh,960px);background:var(--ink);color:var(--white)}
dialog.pv::backdrop{background:rgba(0,0,0,.78)}
.pv .top{height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;border-bottom:1px solid var(--line)}
.pv .top .n{font-weight:560;letter-spacing:-.02em}
.pv .seg{display:flex;border:1px solid var(--line-2)}
.pv .seg button{height:34px;padding:0 14px;font-size:.84rem;color:var(--soft)}
.pv .seg button[aria-pressed="true"]{background:var(--white);color:var(--black)}
.pv .x{justify-self:end;height:34px;padding:0 12px;border:1px solid var(--line-2);font-size:.84rem}
.pv .body{height:calc(100% - 58px);overflow:auto;display:flex;justify-content:center;padding:24px;background:var(--black)}
.pv .body img{width:100%;max-width:1180px;height:auto;align-self:flex-start;border:1px solid var(--line)}
.pv .body img.ph{max-width:390px}


/* ======================= shared additions for every page ======================= */
.nav a.t[aria-current="page"]{color:var(--white)}
.nav a.t[aria-current="page"]::after{transform:scaleX(1)}
.menu-btn{display:none;width:44px;height:44px;place-items:center;border:1px solid var(--line-2)}
.menu-btn i{display:block;width:18px;height:1.5px;background:var(--white);position:relative;transition:transform .3s var(--ease),background-color .2s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--white);transition:transform .3s var(--ease)}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:76px 0 auto;z-index:calc(var(--z-nav) - 1);background:rgba(6,6,7,.97);border-bottom:1px solid var(--line);padding:18px 32px 30px;display:flex;flex-direction:column;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mnav.open{opacity:1;transform:none;pointer-events:auto}
.mnav a{font-size:2rem;letter-spacing:-.04em;font-weight:560;padding:8px 0;border-bottom:1px solid var(--line)}
.mnav a[aria-current="page"]{color:var(--ice)}
.mnav .btn{margin-top:20px;font-size:1rem;border:0}
@media (max-width:900px){
  .nav .l{display:none}.nav .wrap{grid-template-columns:auto 1fr}.nav .r a.t{display:none}
  .nav .r{gap:10px}.nav .r .btn{display:none}.menu-btn{display:grid}
  footer .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}footer .r{justify-self:center}
  .cta .bgx{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:901px){.mnav{display:none}}
footer .l{display:flex;flex-direction:column;gap:4px}
footer .l a:hover,footer .r a:hover{color:var(--white)}
footer .r{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- inner-page hero: full-bleed living background, content centred over it ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;min-height:82vh;min-height:82svh;display:grid;place-items:center;padding:130px 0 100px}
.phero .bgl{position:absolute;inset:0;z-index:-2}
.phero canvas.light{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 46% 48% at 50% 50%,rgba(6,6,7,.92),rgba(6,6,7,.62) 60%,rgba(6,6,7,.3)),linear-gradient(180deg,rgba(6,6,7,.6),transparent 26%,transparent 70%,var(--black))}
.phero .in{display:flex;flex-direction:column;align-items:center;text-align:center}
.phero h1{margin-top:24px;font-size:clamp(2.8rem,6.4vw,6rem);line-height:.98;letter-spacing:-.05em;font-weight:560;max-width:15ch}
.phero h1 em.it{color:var(--ice);font-size:1.04em}
.phero .lede{margin-top:26px;max-width:48ch;color:var(--soft);font-size:1.12rem}
.phero .ctas{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* tilted wall of screens used as a background */
.tilt{position:absolute;inset:-14% -10%;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;transform:rotate(-6deg)}
.tilt .col{display:flex;flex-direction:column;gap:18px}
.tilt img{width:100%;height:auto;opacity:.42;filter:saturate(.8);border:1px solid rgba(255,255,255,.08)}
@media (prefers-reduced-motion:no-preference){
  .tilt.moving .col{animation:tilt-up 70s linear infinite}
  .tilt.moving .col:nth-child(even){animation-direction:reverse;animation-duration:82s}
  .tilt.paused .col{animation-play-state:paused}
  @keyframes tilt-up{from{transform:translateY(0)}to{transform:translateY(-33.333%)}}
  .js .phero .in > *{animation:fade 1s var(--ease) both}
  .js .phero .in > :nth-child(2){animation-delay:.08s}.js .phero .in > :nth-child(3){animation-delay:.16s}.js .phero .in > :nth-child(4){animation-delay:.24s}
  @keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (max-width:900px){.tilt{grid-template-columns:repeat(2,1fr)}.tilt .col:nth-child(n+3){display:none}}

/* ---------- shared bits ---------- */
.sec{padding:130px 0}
.big{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.08;letter-spacing:-.045em;font-weight:500}
.big em.it{color:var(--ice)}
.muted{color:var(--soft)}
.chip{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:1px solid var(--line);font-size:.9rem;color:var(--soft)}

/* ---------- page loaders: under a second, page-specific, never block clicks ---------- */
.pl{display:none}
.js .pl{display:grid;position:fixed;inset:0;z-index:var(--z-intro);place-items:center;background:var(--black);pointer-events:none;animation:pl-out .4s var(--ease) .72s forwards}
@keyframes pl-out{to{opacity:0;visibility:hidden}}
.pl .cap{position:absolute;left:50%;top:calc(50% + 58px);transform:translateX(-50%);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);opacity:0;animation:pl-in .4s var(--ease) .15s forwards}
@keyframes pl-in{to{opacity:1}}
/* work: three screens deal themselves into a row */
.pl-work .fr{display:flex;gap:10px}
.pl-work .fr i{width:76px;height:48px;border:1px solid rgba(244,244,242,.42);background:#1c1c21;opacity:0;transform:translateY(30px) rotate(-8deg);animation:pl-deal .45s var(--ease) forwards}
.pl-work .fr i:nth-child(2){animation-delay:.08s;transform:translateY(30px) rotate(6deg)}
.pl-work .fr i:nth-child(3){animation-delay:.16s;transform:translateY(30px) rotate(-4deg)}
.pl-work .fr i::before{content:"";display:block;height:8px;border-bottom:1px solid rgba(244,244,242,.25)}
@keyframes pl-deal{to{opacity:1;transform:none}}
/* pricing: the number counts up */
.pl-price .num{font-size:clamp(3rem,7vw,5rem);font-weight:560;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
/* about: the two halves of the name meet */
.pl-about .w{display:flex;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.045em;font-weight:600}
.pl-about .w .a{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ice);transform:translateX(-60px);opacity:0;animation:pl-meet .5s var(--ease) forwards}
.pl-about .w .b{transform:translateX(60px);opacity:0;animation:pl-meet .5s var(--ease) forwards}
@keyframes pl-meet{to{transform:none;opacity:1}}
/* contact: "Hello." is written left to right */
.pl-contact .hi{font-family:"Dancing Script",cursive;font-size:clamp(3rem,8vw,5.4rem);font-weight:600;color:var(--white);clip-path:inset(0 100% 0 0);animation:pl-write .6s cubic-bezier(.5,0,.3,1) forwards}
@keyframes pl-write{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.js .pl{display:none}}
@media (prefers-reduced-motion:no-preference){.js .phero .in > *{animation-delay:.6s}.js .phero .in > :nth-child(2){animation-delay:.68s}.js .phero .in > :nth-child(3){animation-delay:.76s}.js .phero .in > :nth-child(4){animation-delay:.84s}}

/* ---------- daylight sections (proposal): the same design on warm paper, for reading and forms ---------- */
.day{--black:#f4f2ed;--ink:#ecebe5;--panel:#ffffff;--white:#141416;--soft:#55555e;--dim:#7c7c85;--line:rgba(20,20,22,.12);--line-2:rgba(20,20,22,.26);--ice:#3150c8;
  background:var(--black);color:var(--white);position:relative}
.day.fade-in{background:linear-gradient(180deg,#060607 0,var(--black) 160px)}
.day.fade-in.fade-out{background:linear-gradient(180deg,#060607 0,var(--black) 160px,var(--black) calc(100% - 160px),#060607 100%)}
.day.fade-out:not(.fade-in){background:linear-gradient(180deg,var(--black) calc(100% - 160px),#060607 100%)}
.day .btn.solid:hover{color:#f4f2ed}
.day .f .err{color:#b3261e}
.day .f input:focus,.day .f textarea:focus{background:#fff}
.day .f input[aria-invalid="true"]{border-color:#b3261e}
.day ::selection{background:#c9d4ff}
.nav{transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.nav.onday{--white:#141416;--soft:#55555e;--black:#f4f2ed;--line:rgba(20,20,22,.12);--line-2:rgba(20,20,22,.26);--ice:#3150c8}
.nav.solid.onday{background:rgba(244,242,237,.88)}
.nav.onday .btn.solid:hover{color:#f4f2ed}