/* =========================================================
   Skiathos Homes — sh-owners.css
   Owners / Private Strategy Advisory
   Aligned with Home V3.1 aesthetic + color pattern.

   Color flow: dark hero → ice pillars → warm sand → dark form
   Same as Home: navy-dark → ice → navy → ice → navy-dark

   Depends on: sh-core.css (tokens, .btn-primary)
               sh-motion.css (.sh-reveal / .is-in)

   Scope: #sh-owners
========================================================= */

/* ── Page reset ── */
#sh-owners {
  --_ease: cubic-bezier(.22,1,.36,1);
  --_grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --radius: 0px;
  --radius-2: 0px;

  background: var(--navy-dark);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#sh-owners *, #sh-owners *::before, #sh-owners *::after { box-sizing: border-box; }

#sh-owners h1, #sh-owners h2, #sh-owners h3, #sh-owners h4 { color: inherit; margin-bottom: 0; font-weight: 400; line-height: inherit; }
#sh-owners p  { color: inherit; font-size: inherit; margin-bottom: 0; }
#sh-owners li { color: inherit; }
#sh-owners a  { color: inherit; text-decoration: none; }
#sh-owners a:hover { opacity: 1; }
#sh-owners ul, #sh-owners ol { padding-left: 0; }
#sh-owners ::selection { background: rgba(201,174,120,.25); }

/* ── Layout ── */
.own-inner {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* ── Section shared ── */
.own-section {
  padding: clamp(80px, 11vw, 136px) 0;
  position: relative;
}

/* ── Eyebrow (same as shh-eyebrow) ── */
.own-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  line-height: 1;
}
.own-eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: .8;
  flex-shrink: 0;
}
.own-eyebrow--dark { color: var(--gold-on-light); }


/* ════════════════════════════════════════════
   01  HERO — dark, left-aligned (like Home hero)
════════════════════════════════════════════ */
.own-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(80px, 12vh, 130px);
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-dark);
  color: var(--white);
}

/* bg image */
.own-hero__media {
  position: absolute; inset: 0;
  background-image: url("https://skiathoshomes.com/wp-content/uploads/2026/02/1.webp");
  background-position: center;
  background-size: cover;
  opacity: .28;
  transform: scale(1.04);
  will-change: transform;
  transition: transform 1.6s var(--_ease);
}
.own-hero:hover .own-hero__media { transform: scale(1.00); }

/* Cinematic vignette */
.own-hero__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top,    var(--navy-dark) 0%, rgba(7,13,22,.65) 28%, transparent 52%),
    linear-gradient(to bottom, var(--navy-dark) 0%, rgba(7,13,22,.42) 14%, transparent 38%),
    linear-gradient(to right,  rgba(7,13,22,.80) 0%, transparent 28%, transparent 72%, rgba(7,13,22,.80) 100%);
}

/* Grain */
.own-hero__grain {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--_grain);
  background-size: 200px 200px;
  opacity: .026;
  mix-blend-mode: soft-light;
}

.own-hero__inner {
  position: relative;
  z-index: 5;
}

/* Left-aligned body (like Home hero left column) */
.own-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 680px;
}

#sh-owners .own-hero__title {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 5.5vw, 4.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--white);
  text-shadow: 0 16px 48px rgba(0,0,0,.48);
  margin-bottom: clamp(18px, 2.5vw, 28px);
}
#sh-owners .own-hero__title em {
  font-style: italic;
  color: var(--gold);
}

#sh-owners .own-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  font-weight: 300;
  line-height: 1.70;
  color: rgba(255,255,255,.60);
  max-width: 480px;
  margin-bottom: clamp(28px, 3.5vw, 42px);
}

.own-hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* CTA button — flat gold (same as home) */
#sh-owners .btn-primary {
  background: var(--gold);
  color: var(--navy-dark);
  border: none;
  border-radius: 0;
  padding: 16px 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .20em;
  font-size: .70rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .3s var(--_ease), color .3s;
}
#sh-owners .btn-primary:hover {
  background: var(--white);
  color: var(--navy-dark);
}

/* Scroll indicator — same as Home hero */
.own-hero__scroll {
  position: absolute;
  bottom: clamp(28px, 4vh, 44px);
  right: clamp(20px, 4vw, 40px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: default;
  pointer-events: none;
  padding: 0;
}
.own-hero__scroll-track {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,.14);
  display: block;
  position: relative;
  overflow: hidden;
}
.own-hero__scroll-thumb {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: var(--gold);
  animation: ownThumb 2.2s var(--_ease) infinite;
}
@keyframes ownThumb {
  0%   { transform: translateY(-100%); opacity: 1; }
  65%  { transform: translateY(0%);    opacity: 1; }
  100% { transform: translateY(0%);    opacity: 0; }
}
#sh-owners .own-hero__scroll-label {
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  writing-mode: vertical-rl;
}

/* Hero entrance stagger */
.own-hero .own-eyebrow,
.own-hero .own-hero__title,
.own-hero .own-hero__lead,
.own-hero .own-hero__actions {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}
.own-hero .own-eyebrow      { animation: ownFadeUp 1s ease .15s forwards; }
.own-hero .own-hero__title   { animation: ownFadeUp 1s ease .30s forwards; }
.own-hero .own-hero__lead    { animation: ownFadeUp 1s ease .55s forwards; }
.own-hero .own-hero__actions { animation: ownFadeUp 1s ease .80s forwards; }

@keyframes ownFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .own-hero .own-eyebrow,
  .own-hero .own-hero__title,
  .own-hero .own-hero__lead,
  .own-hero .own-hero__actions { animation: none; opacity: 1; transform: none; }
  .own-hero__scroll-thumb { animation: none; }
}



/* ════════════════════════════════════════════
   03  WHY IT MATTERS — WARM SAND (softer, not white)
════════════════════════════════════════════ */
.own-why {
  background:  var(--ice);
  color: var(--ink);
  border-top: 1px solid rgba(18,20,26,.06);
}

.own-why__head {
  margin-bottom: clamp(48px, 6vw, 68px);
}

#sh-owners .own-why__title {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  max-width: 620px;
  margin: 0 0 14px;
}
#sh-owners .own-why__title em {
  font-style: italic;
  color: var(--gold-on-light);
}

#sh-owners .own-why__sub {
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
  max-width: 620px;
  margin: 0;
}

.own-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(18,20,26,.09);
}

.own-risk {
  position: relative;
  padding: clamp(32px, 3.5vw, 48px) clamp(22px, 3vw, 40px);
  border-right: 1px solid rgba(18,20,26,.09);
  transition: background .35s;
}
.own-risk:last-child { border-right: none; }
.own-risk:hover { background: rgba(18,20,26,.018); }

/* Gold topline on each risk card */
.own-risk::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,149,99,.45), transparent);
  pointer-events: none;
}

#sh-owners .own-risk__num {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold-on-light);
  margin-bottom: 18px;
}

#sh-owners .own-risk h3 {
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 12px;
}

#sh-owners .own-risk p {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.74;
  color: var(--text);
  margin: 0;
}

@media (max-width: 900px) {
  .own-risk-grid {
    grid-template-columns: 1fr;
    border-top: none;
  }
  .own-risk {
    border-right: none;
    border-bottom: 1px solid rgba(18,20,26,.08);
    padding: 28px 0;
  }
  .own-risk:last-child { border-bottom: none; }
}


/* ════════════════════════════════════════════
   04  FORM — DARK NAVY (like Contact / Home dark sections)
════════════════════════════════════════════ */
.own-form-sec {
  background: var(--navy);
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,.06);
}

.own-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 5.5vw, 68px);
  align-items: start;
}
@media (max-width: 900px) {
  .own-split { grid-template-columns: 1fr; gap: 40px; }
}

/* Left context */
#sh-owners .own-ctx__title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--white);
  margin: 0 0 clamp(16px, 2vw, 24px);
}

#sh-owners .own-ctx__lead {
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.74;
  color: rgba(255,255,255,.60);
  margin-bottom: 1.2rem;
}

#sh-owners .own-ctx__label {
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
}

.own-steps {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.8rem;
  border-left: 1px solid rgba(255,255,255,.10);
}
#sh-owners .own-steps li {
  padding: 10px 0 10px 20px;
  color: rgba(255,255,255,.55);
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.6;
}

/* Lock note — gold tint (not green) */
.own-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(201,174,120,.05);
  border: 1px solid rgba(201,174,120,.14);
  color: var(--gold);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
}
#sh-owners .own-note i { color: var(--gold); opacity: .55; }

/* Right form card */
.own-card {
  position: relative;
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
  padding: clamp(28px, 4vw, 44px);
}

/* Gold topline */
.own-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--topline-gold);
  opacity: .6;
  pointer-events: none;
}

/* Form labels */
#sh-owners .own-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 700;
  font-family: var(--font-body);
}

#sh-owners .form-group { margin-bottom: 20px; }
#sh-owners .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Field wrapper introduced when this form got real <label>s. It previously used
   placeholders AS labels ("Full Name *"), which meant the field name vanished
   the moment anyone started typing, and screen readers had only an aria-label
   to work with. min-width:0 keeps the wrapper from blowing out the 2-col grid. */
#sh-owners .own-fg { min-width: 0; }
#sh-owners .mt-2 { margin-top: 15px; }
@media (max-width: 600px) { #sh-owners .row-2 { grid-template-columns: 1fr; gap: 0; } }

/* Inputs — dark, bottom-border only */
/* Field appearance comes from the shared system in sh-core.css. The underline
   styling that used to be here matched what core forced anyway, so removing it
   changes nothing except that this form now follows the same rules as the rest
   of the site instead of restating them. */
#sh-owners textarea.control { min-height: 110px; }

/* File upload */
#sh-owners .inputfile { width: .1px; height: .1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
#sh-owners .file-label {
  font-size: .82rem;
  font-weight: 400;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  display: inline-block;
  padding: 10px 0;
}
#sh-owners .file-label:hover { color: var(--gold); }
#sh-owners .file-label i { margin-right: 8px; color: var(--gold); opacity: .55; }

/* Submit — flat gold (same as hero CTA) */
#sh-owners .own-submit {
  width: 100%;
  padding: 16px;
  margin-top: 10px;
}

#sh-owners .own-privacy {
  text-align: center;
  font-size: .72rem;
  color: rgba(255,255,255,.25);
  margin-top: 15px;
  line-height: 1.5;
}
#sh-owners .own-privacy a {
  color: rgba(255,255,255,.40);
  text-decoration: underline;
}

/* Honeypot */
#sh-owners .hp { position: absolute; left: -9999px; opacity: 0; }


/* ════════════════════════════════════════════
   MOBILE
════════════════════════════════════════════ */
@media (max-width: 767px) {
  .own-inner { width: calc(100% - 36px); }

  .own-hero {
    min-height: 100svh;
    padding-block: 40px 20px;
    display: flex;
    flex-direction: column;
  }

  .own-hero__inner {
    flex-grow: 1;
    display: flex;
    align-items: center;
  }

  #sh-owners .own-hero__title {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  .own-hero__scroll {
    right: 16px;
    bottom: 20px;
  }

  .own-card { padding: 26px 22px; }
}