/* OTMC Property Services — shared styles for home and privacy pages */
/* Design tokens */
:root {
  --background: #266941;
  --surface: #429463;
  --text: #fbfbfb;
  --muted: #c7dbcf;
  --primary: #beea7b;
  --secondary: #8de2af;
  --accent: #9b66eb;
  --on-primary: #15151b;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --radius-sm: .75rem; --radius-md: 1.5rem; --radius-lg: 3rem;
  --shadow-1: 0 .25rem .6rem #17472c38, 0 .9rem 1.5rem #194f3030;
  --shadow-2: 0 .8rem 1.8rem #194e4080, 0 2rem 4rem #173f3580;
  --shadow-3: 0 1.5rem 4rem #16483699, 0 3rem 7rem #143f3480;
  --ease: cubic-bezier(.2,.8,.2,1);
  --container: 1360px;
  --header-height: 4.5rem;
}
/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, .55vw + 11px, 22px); overflow-x: clip; scroll-behavior: smooth; scrollbar-color: var(--secondary) var(--background); }
body { margin: 0; overflow-x: clip; background: var(--background); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--accent); color: var(--text); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
/* Base typography */
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--font-heading); line-height: 1.12; letter-spacing: -.055em; text-wrap: balance; }
h2 { font-size: clamp(2.4rem, 5vw, 5rem); }
h3 { font-size: clamp(1.3rem, 2.3vw, 2rem); }
p { color: var(--muted); text-wrap: pretty; }
.eyebrow { display: inline-block; color: var(--primary); font: 700 .8125rem/1.5 var(--font-heading); letter-spacing: .19em; text-transform: uppercase; }
/* Layout and container */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 10vw, 8rem); position: relative; }
.section-head { max-width: 57rem; margin-bottom: var(--s7); }
.section-head h2 { margin: var(--s4) 0 var(--s5); }
.section-head p { max-width: 48rem; font-size: 1.08rem; }
/* Components */
.site-header { position: relative; z-index: 30; background: #266941eb; border-bottom: 1px solid #c7dbcf32; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.site-header__inner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.brand__logo { display: grid; place-items: center; flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; padding: .15rem; border-radius: var(--radius-sm); background: #fbfbfb; }
.brand__logo img { width: 2.3rem; height: 2.3rem; object-fit: contain; }
.brand__name { display: block; font: 700 clamp(.84rem,1.5vw,1.1rem)/1.1 var(--font-heading); letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand__name span { font-weight: 500; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); padding: .75rem 1.5rem; min-height: 3rem; font-family: var(--font-heading); font-weight: 700; line-height: 1.25; background: var(--secondary); color: var(--on-primary); border: 1px solid #fbfbfb66; border-radius: 0; box-shadow: .28rem .28rem 0 #174b35; transition: transform 200ms var(--ease),box-shadow 200ms var(--ease); }
.button:hover { transform: translate(-2px,-2px); box-shadow: .4rem .4rem 0 #174b35; }
.button:active { transform: translate(2px,2px); box-shadow: .1rem .1rem 0 #174b35; }
.button--primary { background: var(--primary); }
.button--secondary { background: #429463e8; color: var(--text); border-color: #c7dbcf70; }
.button--nav { font-size: .875rem; min-height: 2.75rem; padding: .55rem 1rem; white-space: nowrap; }
.button[aria-current='page'] { background: var(--primary); }
.text-link { display: inline-flex; align-items: center; gap: var(--s3); padding-block: var(--s2); border-bottom: 1px solid var(--primary); color: var(--primary); font-weight: 700; }
.skip-link { position: fixed; top: -8rem; left: var(--s4); z-index: 100; background: var(--primary); color: var(--on-primary); padding: var(--s3); }
.skip-link:focus { top: var(--s4); }
.back-to-top { position: fixed; bottom: var(--s5); right: var(--s6); z-index: 40; width: 3rem; height: 3rem; border: 1px solid #fbfbfb60; border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease),transform 200ms var(--ease); }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }
.scroll-progress { position: fixed; z-index: 45; right: 0; top: 0; height: 0; width: .22rem; background: var(--primary); pointer-events: none; }
.site-footer { position: relative; overflow: clip; background: #1f5a38; border-top: 1px solid #c7dbcf35; }
.site-footer__inner { position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); padding-block: var(--s8) var(--s6); min-height: 15rem; }
.site-footer__outline { position: absolute; left: 0; top: -.3em; font: 700 clamp(7rem,20vw,20rem)/1 var(--font-heading); color: transparent; -webkit-text-stroke: 1px #beea7b27; pointer-events: none; }
.site-footer__brand { position: relative; display: flex; align-items: center; gap: var(--s3); font-family: var(--font-heading); }
.site-footer__brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; background: var(--text); padding: .15rem; border-radius: var(--radius-sm); }
.site-footer p,.site-footer span:not(.site-footer__outline) { position: relative; margin: 0; font-size: .875rem; }
/* Page sections */
.hero-shell { height: 100vh; height: 100svh; height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); background: radial-gradient(ellipse 50% 58% at 50% 45%, #5aa978 0%, #30754d 48%, #266941 95%); }
.hero-shell main { min-height: 0; display: contents; }
.hero { min-height: 0; display: grid; align-items: center; position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 58%,#beea7b26,transparent 50%); }
.hero__inner { min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: calc(var(--hs,1) * min(2svh,1rem)); padding-block: calc(var(--hs,1) * min(2svh,1rem)); }
.hero__object { width: calc(var(--hs,1) * min(37svh,31vw,20rem)); height: calc(var(--hs,1) * min(30svh,26vw,16rem)); max-width: 90vw; flex: 0 1 auto; position: relative; perspective: 1000px; pointer-events: none; transform-style: preserve-3d; }
.hero__halo { position: absolute; inset: 8%; border-radius: 50%; background: #beea7b40; filter: blur(30px); }
.hero__ring { position: absolute; inset: -9%; border: 1px solid #beea7b70; border-radius: 50%; transform: rotateX(69deg) rotateZ(-20deg); animation: ring-turn 28s linear infinite; }
.glass-sheet { position: absolute; width: 53%; height: 73%; left: 24%; top: 10%; border: 1px solid #fbfbfb96; border-radius: var(--radius-md); box-shadow: inset 0 0 1.5rem #fbfbfb2a,var(--shadow-2); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); transform: rotate(-14deg) skewY(8deg); }
.glass-sheet--back { background: linear-gradient(140deg,#9b66eb99,#8de2af3b); transform: translate(-29%,-8%) rotate(-21deg) skewY(8deg); }
.glass-sheet--middle { background: linear-gradient(145deg,#fbfbfb55,#8de2af38 70%,#429463dd); transform: translate(25%,-2%) rotate(11deg) skewY(-8deg); }
.glass-sheet--front { background: linear-gradient(135deg,#beea7b68,#fbfbfb36 53%,#9b66eb52); transform: translate(0,12%) rotate(-4deg); }
.glass-sheet__roof { position: absolute; width: 55%; height: 40%; left: 24%; top: 22%; border-top: .45rem solid var(--primary); border-left: .45rem solid var(--primary); transform: rotate(45deg); border-radius: .25rem; }
.glass-sheet__door { position: absolute; bottom: 14%; left: 42%; width: 19%; height: 30%; border: 2px solid var(--text); border-bottom: none; }
.glass-sheet__window { position: absolute; width: 35%; height: 25%; border: 2px solid var(--secondary); left: 33%; top: 35%; }
.glass-sheet__line { position: absolute; inset: 20%; border: 2px solid var(--accent); border-radius: var(--radius-sm); }
.hero__copy { width: 100%; max-width: 62rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__copy h1 { max-width: 12ch; margin: calc(var(--hs,1) * min(1.3svh,.7rem)) 0; font-size: calc(var(--hs,1) * clamp(2rem,min(6vw,8svh),7rem)); line-height: .99; letter-spacing: -.072em; }
.hero__copy h1 em { font-style: normal; color: var(--primary); }
.hero__copy p { max-width: 43rem; margin-bottom: calc(var(--hs,1) * min(2.1svh,1rem)); font-size: calc(var(--hs,1) * clamp(.95rem,min(2vw,2.6svh),1.35rem)); line-height: 1.4; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); }
.hero__copy .eyebrow { font-size: calc(var(--hs,1) * .75rem); }
.about { background: #2c7549; }
.fact-strip { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: var(--s4); }
.fact-strip > div { display: flex; flex-direction: column; padding: var(--s6); border-radius: 5rem; background: #429463; border: 1px solid #c7dbcf4d; box-shadow: var(--shadow-1); }
.fact-strip span { color: var(--primary); font: 700 .875rem var(--font-heading); }
.fact-strip strong { font: 700 1.35rem var(--font-heading); }
.fact-strip small { color: var(--muted); font-size: .875rem; }
.features { background: #266941; }
.feature-list { border-top: 1px solid #c7dbcf6b; }
.feature-row { display: grid; grid-template-columns: 5rem minmax(0,1fr) auto; align-items: center; gap: var(--s6); padding: var(--s5) var(--s4); border-bottom: 1px solid #c7dbcf6b; transition: background 200ms var(--ease),transform 200ms var(--ease); }
.feature-row:hover { background: #42946370; transform: translateY(-2px); }
.feature-row__icon { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: var(--radius-md); background: linear-gradient(140deg,var(--primary),var(--secondary)); color: #266941; font: 700 2rem var(--font-heading); box-shadow: var(--shadow-1); }
.feature-row h3 { margin-bottom: var(--s2); }
.feature-row p { max-width: 45rem; margin: 0; }
.feature-row__label { color: var(--primary); letter-spacing: .12em; font: 700 .8125rem var(--font-heading); }
.process { background: #378756; }
.step-track { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); position: relative; gap: var(--s5); }
.step-track::before { content: ''; position: absolute; top: 2rem; left: 1.2rem; right: 1.2rem; height: 1px; background: #beea7b99; }
.step-track article { position: relative; padding-top: var(--s5); }
.step-track article span { display: grid; place-items: center; width: 3.8rem; height: 3.8rem; margin-bottom: var(--s5); background: var(--primary); border-radius: 50%; color: var(--on-primary); font: 700 1rem var(--font-heading); box-shadow: var(--shadow-1); }
.step-track h3 { margin-bottom: var(--s3); }
.trust { background: #266941; }
.trust__grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: var(--s8); }
.trust__art { display: grid; place-items: center; min-height: 24rem; background: radial-gradient(circle,#9b66eb65,transparent 70%); }
.trust__shield { display: grid; place-items: center; width: 14rem; height: 17rem; background: linear-gradient(140deg,#beea7b91,#8de2af50,#9b66eb65); border: 2px solid #beea7b8c; border-radius: 49% 49% 48% 48% / 20% 20% 65% 65%; box-shadow: inset 0 0 2rem #fbfbfb36,var(--shadow-3); transform: rotate(-8deg); }
.trust__shield span { color: var(--text); font-size: 6rem; text-shadow: 0 0 2rem #beea7b; }
.trust__content h2 { margin: var(--s4) 0 var(--s5); }
.trust__content ul { list-style: none; padding: 0; margin: var(--s6) 0; }
.trust__content li { padding: var(--s3) 0 var(--s3) var(--s6); border-bottom: 1px solid #c7dbcf4d; position: relative; }
.trust__content li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); }
.cta { text-align: center; background: linear-gradient(120deg,#429463,#338452,#266941); border-block: 1px solid #beea7b70; }
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta h2 { max-width: 14ch; margin: var(--s4) 0; font-size: clamp(3rem,7vw,7rem); }
.cta p { max-width: 43rem; margin-bottom: var(--s6); }
/* Privacy page */
.privacy-main { padding: var(--s7) var(--s4) var(--s9); background: radial-gradient(circle at 50% 0,#42946375,transparent 35%); }
.privacy-wrap { width: min(100%,47.5rem); margin-inline: auto; }
.privacy-title { padding: var(--s6); border-radius: var(--radius-md); background: #429463; border: 1px solid #c7dbcf6b; box-shadow: var(--shadow-1); }
.privacy-title h1 { font-size: clamp(2.5rem,6vw,4.5rem); margin: var(--s3) 0 var(--s4); overflow-wrap: anywhere; }
.privacy-title p { margin: 0; color: var(--text); }
.policy-content { padding-top: var(--s4); }
.policy-section { display: grid; grid-template-columns: 3.5rem minmax(0,1fr); gap: var(--s4); padding-block: var(--s6); border-bottom: 1px solid #c7dbcf5a; }
.policy-section:nth-child(even) { background: #42946330; }
.policy-section__side { padding-top: var(--s1); color: var(--primary); font: 700 .875rem var(--font-heading); }
.policy-section h2 { font-size: clamp(1.35rem,2.8vw,1.9rem); line-height: 1.25; letter-spacing: -.04em; margin: 0 0 var(--s5); }
.policy-section p { margin-bottom: var(--s4); color: var(--text); }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul { padding-left: var(--s5); margin: 0 0 var(--s4); }
.policy-section li { padding-left: var(--s1); margin-bottom: var(--s2); }
/* Utilities */
.reveal { opacity: 0; transform: translateY(1.5rem) rotateX(3deg); transition: opacity 600ms var(--ease),transform 600ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
/* Responsive rules */
@media (min-width: 768px) { .container { width: min(100% - 4rem,var(--container)); } }
@media (min-width: 1280px) { .container { width: min(100% - 6rem,var(--container)); } }
@media (max-width: 767px) {
  :root { --header-height: 4rem; }
  .brand__name { max-width: min(46vw,15rem); }
  .brand__name span { display: block; font-size: .8em; }
  .button--nav { padding: .5rem .7rem; font-size: .8125rem; }
  .hero__object { width: calc(var(--hs,1) * min(47vw,35svh)); height: calc(var(--hs,1) * min(44vw,30svh)); }
  .hero__copy h1 { font-size: calc(var(--hs,1) * clamp(1.85rem,min(8vw,7.5svh),4.6rem)); }
  .hero__copy p { max-width: 34ch; }
  .fact-strip { grid-template-columns: 1fr; }
  .fact-strip > div { border-radius: var(--radius-lg); padding: var(--s5); }
  .feature-row { grid-template-columns: 3.5rem minmax(0,1fr); gap: var(--s4); padding-inline: 0; }
  .feature-row__icon { width: 3.3rem; height: 3.3rem; font-size: 1.5rem; }
  .feature-row__label { grid-column: 2; }
  .step-track { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .step-track::before { display: none; }
  .trust__grid { grid-template-columns: 1fr; gap: var(--s4); }
  .trust__art { min-height: 15rem; }
  .trust__shield { width: 10rem; height: 12rem; }
  .site-footer__inner { align-items: start; flex-direction: column; }
  .privacy-main { padding-top: var(--s5); }
  .policy-section { grid-template-columns: 2rem minmax(0,1fr); gap: var(--s3); }
}
@media (max-width: 480px) {
  .hero__actions { gap: var(--s3); }
  .hero__actions .button { min-height: 2.75rem; padding: .5rem .8rem; font-size: .85rem; }
  .hero__copy .eyebrow { max-width: 30ch; }
  .step-track { grid-template-columns: 1fr; }
  .step-track article { display: grid; grid-template-columns: 3.8rem minmax(0,1fr); gap: 0 var(--s4); padding-top: 0; }
  .step-track article span { grid-row: span 2; }
  .privacy-title { padding: var(--s5); }
  .policy-section { grid-template-columns: 1fr; }
  .policy-section__side { font-size: .875rem; }
}
@media (max-height: 600px) and (min-width: 600px) {
  .hero__inner { flex-direction: row; gap: var(--s5); }
  .hero__object { width: calc(var(--hs,1) * min(35vw,36svh)); height: calc(var(--hs,1) * 33svh); flex: 0 0 auto; }
  .hero__copy { flex: 1; text-align: center; }
  .hero__copy h1 { font-size: calc(var(--hs,1) * min(5vw,10svh)); }
  .hero__copy p { margin-bottom: var(--s2); }
}
@media (max-height: 420px) { .hero__object { display: none; } .hero__inner { flex-direction: column; } }
.hero--compact .hero__actions .button--secondary { display: none; }
.hero--compact .hero__ring { display: none; }
/* Motion and reduced motion */
@keyframes ring-turn { to { transform: rotateX(69deg) rotateZ(340deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; } .reveal { opacity: 1; transform: none; } }
/* Print */
@media print { .site-header,.site-footer,.back-to-top,.scroll-progress { display: none; } body { color: #15151b; background: #fbfbfb; } .privacy-main { padding: 0; } .policy-section,.privacy-title { color: #15151b; background: none; border-color: #c7dbcf; box-shadow: none; } .policy-section p,.policy-section h2 { color: #15151b; } }