/* Vessel Skin Studio, demo build.

   The opposite end of the range from the plumbing demo. Warm blush and coral,
   a display serif, layered gradients, soft shapes. Where the plumbing site is
   trying to get somebody to a phone number in four seconds, this one is trying
   to make the place feel like somewhere you would want to spend ninety
   minutes.

   Shares nothing with the Echelon stylesheet or with the plumbing demo.

   Every colour pair below was measured before use. Coral fails AA as text
   against every background here, so it is used only for fills, borders and
   decoration, never for words. */

@font-face{
  font-family:"Cormorant Garamond";
  src:url("/demos/fonts/cormorant-subset.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* Metric-adjusted fallback so the swap does not move the layout. */
@font-face{
  font-family:"Cormorant Fallback";
  src:local("Georgia"),local("Times New Roman"),local("Times");
  ascent-override:92.4%;
  descent-override:28.7%;
  line-gap-override:0%;
  size-adjust:89%;    /* Measured in the browser, not estimated. Georgia renders
                         wider than Cormorant at the same size, so the fallback
                         scales down. A first guess of 118% ran the fallback 32%
                         too wide and cost 0.026 CLS. */
}

:root{
  /* surfaces, palest to warmest */
  --blush:#fff5f2;
  --rose:#ffe9e2;
  --peach:#ffdcc9;
  --apricot:#ffcdb2;
  --white:#ffffff;

  /* text, measured against blush, rose and peach */
  --ink:#3a1f27;        /* 13.94 on blush */
  --ink-2:#6d4a53;      /* 7.11 on blush */
  --muted:#7d5a62;      /* 5.58 on blush, 4.65 on peach */

  /* accents */
  --coral:#f2683c;      /* decorative only. 2.87 as text, so never used for words */
  --rust:#b83c1f;       /* 5.29 on blush, safe for links */
  --deep:#9c2f4d;       /* 6.69 on blush, and white on it is 7.17 */

  --line:#f6d5c8;
  --serif:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1120px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blush);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative;z-index:1}
a{color:var(--rust)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--deep);outline-offset:3px;border-radius:3px;
}
.skip{
  position:absolute;left:14px;top:-60px;z-index:60;
  background:var(--deep);color:#fff;padding:10px 16px;text-decoration:none;border-radius:4px;
}
.skip:focus{top:14px}
main:focus{outline:none}
h1,h2,h3,.wordmark{font-family:var(--serif);font-weight:400;letter-spacing:.004em}
.tint{color:var(--deep)}

/* header */
.site-head{background:var(--blush);position:relative;z-index:5}
.head-in{max-width:var(--wrap);margin:0 auto;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.wordmark{font-size:1.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1.1}
.wordmark small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.26em;color:var(--muted);margin-top:4px}
.head-nav{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.head-nav a{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.head-nav a:hover{color:var(--rust)}

/* hero */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:96px 0 108px;
  background:
    radial-gradient(80% 60% at 50% 0%,var(--peach) 0%,transparent 70%),
    linear-gradient(180deg,var(--rose) 0%,var(--blush) 78%);
}
/* Soft light behind the headline. Two offset orbs animated on transform, so
   the compositor handles it rather than repainting the section every frame. */
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(46px)}
.hero::before{
  width:520px;height:520px;left:-140px;top:-160px;
  background:radial-gradient(circle,rgba(242,104,60,.42),transparent 68%);
  animation:drift1 22s ease-in-out infinite alternate;
}
.hero::after{
  width:460px;height:460px;right:-120px;top:-60px;
  background:radial-gradient(circle,rgba(156,47,77,.30),transparent 68%);
  animation:drift2 27s ease-in-out infinite alternate;
}
@keyframes drift1{from{transform:translate3d(0,0,0)}to{transform:translate3d(60px,42px,0) scale(1.12)}}
@keyframes drift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50px,54px,0) scale(1.1)}}

.eyebrow{
  display:inline-block;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--deep);background:rgba(255,255,255,.72);
  padding:8px 18px;border-radius:100px;border:1px solid var(--line);margin:0 0 26px;
}
.hero h1{font-size:clamp(2.9rem,7vw,5.2rem);line-height:1.02;margin:0 auto 24px;max-width:660px}
.hero-sub{font-size:1.14rem;color:var(--ink-2);margin:0 auto 36px;max-width:540px}

.btn{
  display:inline-block;background:var(--deep);color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  padding:17px 38px;border:0;cursor:pointer;border-radius:100px;
  box-shadow:0 12px 30px -12px rgba(156,47,77,.6);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(156,47,77,.7)}
.btn[disabled]{background:#c9a3ae;box-shadow:none;cursor:not-allowed;transform:none}

/* sections */
section{padding:84px 0;position:relative}
.band-rose{background:var(--rose)}
.band-white{background:var(--white)}
.center{text-align:center}
.rule{width:40px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--coral),var(--deep));margin:0 auto 24px}
.rule.left{margin-left:0}
h2{font-size:clamp(2.1rem,3.8vw,3.1rem);margin:0 0 16px;line-height:1.14}
.lede{color:var(--ink-2);margin:0 auto 52px;max-width:560px;font-size:1.06rem}

/* treatments, cards rather than a bare list */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{
  background:var(--white);border-radius:20px;padding:30px 26px 28px;
  border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--coral),var(--deep))}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(58,31,39,.5)}
.card h3{font-size:1.55rem;margin:0 0 10px;line-height:1.2}
.card p{margin:0;color:var(--ink-2);font-size:.96rem}
.dur{
  display:inline-block;margin:0 0 16px;font-family:var(--sans);
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--deep);background:var(--rose);padding:6px 13px;border-radius:100px;
}

/* studio */
.studio-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.art{
  aspect-ratio:4/5;border-radius:24px;position:relative;overflow:hidden;
  background:
    radial-gradient(90% 70% at 20% 10%,rgba(255,255,255,.75) 0%,transparent 55%),
    radial-gradient(70% 60% at 85% 85%,var(--deep) 0%,transparent 60%),
    linear-gradient(150deg,var(--apricot) 0%,var(--coral) 48%,var(--deep) 100%);
}
.art::after{content:"";position:absolute;inset:14px;border-radius:16px;border:1px solid rgba(255,255,255,.34)}
.studio p{color:var(--ink-2)}
.studio p:first-of-type{font-size:1.14rem;color:var(--ink)}

/* visit */
.visit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vcard{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px}
.vcard h3{font-size:1.35rem;margin:0 0 14px}
.vcard ul{list-style:none;margin:0;padding:0;color:var(--ink-2);font-size:.95rem}
.vcard li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.vcard li:last-child{border-bottom:0}
.vcard li span:last-child{color:var(--ink);font-weight:600}
.vcard li.single{display:block}

/* enquiry */
.enquiry{
  background:
    radial-gradient(70% 90% at 15% 10%,var(--peach) 0%,transparent 60%),
    radial-gradient(60% 80% at 90% 90%,var(--rose) 0%,transparent 60%),
    var(--blush);
}
.form{max-width:660px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:36px}
.form-note{background:var(--rose);border-radius:12px;padding:14px 16px;font-size:.9rem;color:var(--ink-2);margin:0 0 26px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
input,textarea,select{
  font-family:var(--sans);font-size:1rem;padding:13px 15px;
  border:1px solid var(--line);background:var(--blush);color:var(--ink);border-radius:10px;
}
input:focus,textarea:focus,select:focus{background:var(--white)}
textarea{min-height:110px;resize:vertical}

/* footer */
.site-foot{background:var(--ink);color:#e6d2d6;padding:56px 0 42px;font-size:.92rem}
.site-foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:38px}
.site-foot h3{font-family:var(--sans);color:#fff;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;font-weight:600}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:7px}
.foot-legal{border-top:1px solid #5a3d45;margin-top:38px;padding-top:22px;color:#c2a5ab;font-size:.85rem}

@media (max-width:960px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visit-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .studio-grid{grid-template-columns:1fr;gap:36px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .row2{grid-template-columns:1fr}
  .hero{padding:66px 0 74px}
  section{padding:58px 0}
  .form{padding:26px}
}
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .card:hover,.btn:hover{transform:none}
}