/* Caprock Operating LLC - caprockog.com
   Core colours follow the adopted C1 "Caprock Strata" identity standards
   (05_SALES-MARKETING\Logos\Caprock Operating LLC): slate, rust, and caliche as
   the supporting line-and-tint colour. The other values below are web-only steps
   of those colours, recorded in Brand-Standards\Caprock Operating LLC\DESIGN.md.
   Do not add a colour here that is not in that file.

   Colour as type: rust only for small labels and marks where it measures at
   least 4.5:1 against its ground; rust-bright only for large display type or
   non-text marks on dark. On slate the logo is the knockout lockup (cap stays rust).

   This is an OWNER-RELATIONS site, not a contractor pitch. The register is
   deliberately quiet: more white space, longer measure, rust used only to mark
   structure. People read this page to solve a problem with their money, often
   on a phone, often over 60 - so the base font size is a step larger and the
   line height is looser than the house default. */

:root{
  --slate:#2B2F33;         /* primary - strata, wordmark, body text */
  --slate-deep:#1E2225;    /* hero ground, darker step of slate */
  --slate-mid:#62696F;     /* secondary lines / muted text (4.8:1 on paper-warm) */
  --rust:#A63D2A;          /* accent - the cap layer. used sparingly, as in the mark */
  --rust-bright:#C8543E;   /* accent on dark ground only */
  --caliche:#CBBFA3;       /* supporting: hairlines, rules, tints; never in the logo */
  --paper:#FAF9F7;
  --paper-warm:#F1EEE9;
  --rule:#DDD8D1;
  --max:1140px;
  --pad:clamp(1.25rem,4vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--slate);
  font-family:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.09rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--slate);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--rust)}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:44rem}

/* ---------- type ---------- */
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.25rem);margin-top:0}
h3{font-size:1.06rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.35}
p{margin:0 0 1.15em;max-width:64ch}
.lede{font-size:clamp(1.12rem,2vw,1.32rem);line-height:1.58;color:#41464B}
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--slate-mid);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:1.9rem;height:3px;background:var(--rust);flex:none}
.on-dark .eyebrow{color:#9DA4AA}
.on-dark .eyebrow::before{background:var(--rust-bright)}

/* ---------- header ---------- */
.site-head{background:var(--slate);border-bottom:1px solid rgba(255,255,255,.09)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.05rem;max-width:var(--max);margin:0 auto;padding-inline:var(--pad);flex-wrap:wrap}
.site-head .logo img{width:min(250px,52vw)}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.9rem);flex-wrap:wrap}
.nav a{color:#E9E6E2;text-decoration:none;font-size:.85rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding-block:.3rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--rust-bright)}
.nav .tel{color:#fff;border:1px solid rgba(255,255,255,.35);padding:.5rem .95rem;border-bottom-width:1px;
  letter-spacing:.06em}
.nav .tel:hover{background:var(--rust);border-color:var(--rust)}

/* ---------- hero ---------- */
.hero{background:var(--slate-deep);color:#F1EFEC;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--caliche);opacity:.28}
.hero-in{padding-block:clamp(3.2rem,8vw,6rem);position:relative;z-index:1}
.hero h1{color:#fff;max-width:18ch}
.hero h1 em{font-style:normal;color:var(--rust-bright)}
.hero .lede{color:#C2C7CB;max-width:54ch;margin-top:1.3rem}
.hero-mark{position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(28rem,44vw);opacity:.07;pointer-events:none;z-index:0}
@media(max-width:820px){.hero-mark{right:-20%;width:24rem;opacity:.05}}
.hero.slim .hero-in{padding-block:clamp(2.4rem,5.5vw,3.8rem)}
.hero.slim h1{max-width:24ch}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.btn{display:inline-block;font-weight:700;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;padding:.95rem 1.7rem;border:2px solid transparent;
  transition:.15s;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--rust);color:#fff;border-color:var(--rust)}
.btn-primary:hover{background:#8F3324;border-color:#8F3324;color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn-dark{border-color:var(--slate);color:var(--slate);background:none}
.btn-dark:hover{background:var(--slate);color:#fff}

/* ---------- sections ---------- */
section{padding-block:clamp(3rem,7vw,5rem)}
section.tint{background:var(--paper-warm)}
section.dark{background:var(--slate);color:#E9E6E2}
section.dark h2,section.dark h3{color:#fff}
section.dark p{color:#C2C7CB}
section.dark a{color:#fff}

/* ---------- cards ---------- */
.grid{display:grid;gap:1.6rem;margin-top:2.4rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{background:#fff;border:1px solid var(--rule);padding:1.7rem 1.6rem}
.card h3{margin-bottom:.6rem;color:var(--slate)}
.card p:last-child{margin-bottom:0}
.card .num{display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;
  color:var(--rust);margin-bottom:.9rem}
section.tint .card{background:var(--paper)}

/* ---------- Q&A / explainers ---------- */
.qa{border-top:1px solid var(--rule);margin-top:2.4rem}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{
  cursor:pointer;padding:1.25rem 2.5rem 1.25rem 0;font-weight:700;font-size:1.06rem;
  list-style:none;position:relative;line-height:1.4;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:.35rem;top:1.05rem;font-size:1.5rem;font-weight:400;
  color:var(--rust);line-height:1}
.qa details[open] summary::after{content:"\2013"}
.qa summary:hover{color:var(--rust)}
.qa .body{padding:0 0 1.45rem;max-width:64ch}
.qa .body p:last-child{margin-bottom:0}
.qa .cite{font-size:.88rem;color:var(--slate-mid);border-left:3px solid var(--caliche);
  padding-left:.9rem;margin-top:1rem}

/* Statute citations link out to the text on the Texas Legislature's site.
   Dotted rather than solid so a citation still reads as a citation and does
   not compete with the body links a reader is meant to act on. */
.statute{color:inherit;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:.2em}
.statute:hover,.statute:focus-visible{color:var(--rust);text-decoration-style:solid}
section.dark .statute:hover,section.dark .statute:focus-visible{color:#fff;text-decoration-color:var(--rust-bright)}

/* ---------- checklist ---------- */
.checklist{list-style:none;padding:0;margin:1.6rem 0 0;max-width:46rem}
.checklist li{position:relative;padding-left:1.9rem;margin-bottom:.8rem}
.checklist li::before{
  content:"";position:absolute;left:0;top:.62em;width:.62rem;height:.62rem;background:var(--rust)}
section.dark .checklist li::before{background:var(--rust-bright)}

/* ---------- forms ---------- */
.form{max-width:40rem;margin-top:2rem}
.field{margin-bottom:1.3rem}
.field label{display:block;font-weight:700;font-size:.9rem;letter-spacing:.03em;margin-bottom:.4rem}
.field .hint{display:block;font-weight:400;font-size:.85rem;color:var(--slate-mid);margin-top:.15rem}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:1rem;color:var(--slate);background:#fff;
  border:1px solid var(--rule);padding:.8rem .9rem;border-radius:0}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--slate);outline:2px solid var(--rust);outline-offset:1px}
.field textarea{min-height:9rem;resize:vertical}
.req{color:var(--rust);font-weight:700}
.formnote{font-size:.9rem;color:var(--slate-mid);max-width:40rem;margin-top:1.4rem}
.alert{border:1px solid var(--rust);border-left-width:5px;background:#fff;
  padding:1rem 1.15rem;margin-bottom:1.8rem;max-width:40rem}
.alert p{margin:0;font-size:.96rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- contact blocks ---------- */
.contact-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.2rem}
.contact-card{border:1px solid var(--rule);background:#fff;padding:1.5rem}
section.dark .contact-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
.contact-card h3{font-size:.78rem;letter-spacing:.18em;color:var(--slate-mid);margin-bottom:.7rem}
section.dark .contact-card h3{color:#9DA4AA}
.contact-card .big{font-size:1.16rem;font-weight:700;line-height:1.45;margin:0}
.contact-card .big a{text-decoration:none}
.contact-card .sub{font-size:.9rem;color:var(--slate-mid);margin:.45rem 0 0}
section.dark .contact-card .sub{color:#9DA4AA}

/* ---------- footer ---------- */
.site-foot{background:var(--slate-deep);color:#9DA4AA;padding-block:3rem;font-size:.9rem}
.foot-in{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.site-foot a{color:#D6D2CD;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot .logo img{width:200px;margin-bottom:1.1rem}
.site-foot h3{font-size:.72rem;letter-spacing:.18em;color:#939AA0;margin-bottom:.8rem}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.45rem}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:2.6rem;padding-top:1.5rem;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);font-size:.82rem;color:#939AA0}
.legal p{max-width:none;margin:0 0 .4rem}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px;background:var(--rust);color:#fff;padding:.75rem 1.2rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
hr.rule{border:0;border-top:1px solid var(--rule);margin:2.6rem 0}
.stamp{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-mid);font-weight:700}

/* ---------- v2 motion (2026-10-03) ----------
   Calm pages. Reveals only run under html.motion, which /js/site.js adds (and removes again if
   setup never finishes). With reduced motion, no JS or no GSAP, nothing here applies. */
.motion .reveal{opacity:0;transform:translateY(12px)} /* opacity only: screen readers still reach it */
.hero::after{transform:scaleX(var(--line,1));transform-origin:left center}
@media (prefers-reduced-motion:reduce){.motion .reveal{opacity:1!important;transform:none!important}}

/* ---------- home: 3D hero film (plays on its own) ----------
   Without .is-film (no JS, no GSAP, no WebGL, reduced motion, weak device) this is the plain hero
   with the white C watermark. html.has-3d is set by /js/scene3d.js on its first drawn frame. */
.scene .scene3d{position:absolute;inset:0;z-index:0}
.scene .scene3d canvas{display:block;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.4s ease}
.has-3d .scene .scene3d canvas{opacity:1}
.has-3d .scene .hero-mark{opacity:0;transition:opacity 1s ease}
.scene.rewind .scene3d canvas{opacity:0;transition:opacity .3s ease}
.scene-shade{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,#1E2225 0%,rgba(30,34,37,.92) 34%,rgba(30,34,37,0) 62%)}
/* The film panel's band is reserved from first paint and the panel sits in it absolutely, so the film
   starting never moves the hero copy or the page below it (layout shift). */
.scene .hero-in{padding-bottom:calc(clamp(3.2rem,8vw,6rem) + 9rem)}
/* No film possible: give the band back. Reduced motion is known before first paint; .no-film is set by
   site.js on weak devices and by scene3d.js if the scene fails. */
.scene.no-film .hero-in{padding-bottom:clamp(3.2rem,8vw,6rem)}
.story-panel{display:none;position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(3.2rem,8vw,6rem);max-width:34rem}
.is-film .story-panel{display:block}
.story{list-style:none;margin:0 0 1rem;padding:0;display:grid;min-height:3.4em}
.story-step{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(8px);
  transition:opacity .6s ease,transform .6s ease,visibility .6s}
.story-step.on{visibility:visible;opacity:1;transform:none}
.story-step p{margin:0;color:#C2C7CB;font-size:1rem;line-height:1.55;border-left:3px solid var(--rust-bright);padding-left:.9rem}
.story-controls{display:flex;align-items:center;gap:.75rem 1rem;flex-wrap:wrap}
.story-toggle{min-height:44px;min-width:44px;padding:0 1.1rem;border:2px solid #C2C7CB;border-radius:0;
  background:transparent;color:#F1EFEC;font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer}
.story-toggle:hover{background:#F1EFEC;color:#1E2225}
.story-toggle:focus-visible,.story-ticks button:focus-visible{outline:3px solid var(--rust-bright);outline-offset:2px}
.story-ticks{display:flex;align-items:center}
.story-ticks button{position:relative;width:30px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.story-ticks button::before{content:"";position:absolute;left:4px;top:50%;width:18px;height:2px;background:#9DA4AA;
  transition:width .3s ease,background .3s ease}
.story-ticks button[aria-current]::before{width:22px;background:var(--rust-bright)}
/* Below 1280 the copy runs too far right for the scene to sit beside it: dim it behind the copy instead. */
@media (max-width:1279px){
  .scene-shade{background:linear-gradient(180deg,rgba(30,34,37,.55) 0%,rgba(30,34,37,.88) 55%,#1E2225 100%)}
  .has-3d .scene .scene3d canvas{opacity:.55}
}
@media (prefers-reduced-motion:reduce){.story-panel{display:none!important}.scene .hero-in{padding-bottom:clamp(3.2rem,8vw,6rem)}}
/* Phones get the still hero, never the film (Jason 2026-10-03): no band, no panel, from first paint. */
@media (max-width:819px){.scene .hero-in{padding-bottom:clamp(3.2rem,8vw,6rem)}.story-panel{display:none!important}}