/* Houston Austin LLP — design concept by OnceDivided Studios */
body{margin:0;background:#F3F1EC}
a{color:inherit;text-decoration:none}
a:hover{color:#7E6534}
.ha-ink a:hover{color:#C9AE7A}
.ha-line{position:absolute;width:1px;transform-origin:top center;transform:rotate(-22deg) scaleY(1)}
/* Angled curtain: hidden by default, so the page is complete without motion */
.ha-curtain{position:absolute;top:0;bottom:0;left:-45%;right:-45%;transform:skewX(22deg);translate:101% 0;pointer-events:none;z-index:2}
.ha-glyph{position:absolute;top:50%;left:50%;margin:-0.62em 0 0 -0.22em;font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;line-height:1;color:#DCD7CD;pointer-events:none;user-select:none}
.ha-portrait img{scale:1.18;transition:scale 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s cubic-bezier(.2,.7,.2,1)}
.ha-portrait:hover img,.ha-portrait:focus-visible img{scale:1.27;filter:contrast(1.15) brightness(1.05)}
.ha-portrait:focus-visible{outline:2px solid #C9AE7A;outline-offset:4px}
.ha-matter{transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}
.ha-matter:hover{padding-left:16px;color:#141413}
.ha-matter .ha-slash{opacity:0;transition:opacity .4s}
.ha-matter:hover .ha-slash{opacity:1}
.ha-btn{transition:background .25s,color .25s,border-color .25s}
.ha-btn-ink:hover{background:#7E6534;border-color:#7E6534;color:#F3F1EC}
.ha-btn-brass:hover{background:#C9AE7A;border-color:#C9AE7A;color:#141413}

/* Responsive */
.ha-head{position:sticky;top:0;z-index:50;background:#F3F1EC}
.ha-menu{display:none}
.ha-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:44px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ha-menu summary::-webkit-details-marker{display:none}
.ha-menu .ha-close{display:none}
.ha-menu[open] .ha-close{display:inline}
.ha-menu[open] .ha-open{display:none}
.ha-menu-panel{position:absolute;left:0;right:0;top:100%;background:#F3F1EC;border-bottom:1px solid #DAD6CE;padding:8px clamp(20px,4vw,48px) 36px;box-shadow:0 24px 40px rgba(20,20,19,.08)}
.ha-menu-panel a{display:flex;align-items:baseline;justify-content:space-between;min-height:44px;padding:14px 0;border-bottom:1px solid #DAD6CE;font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;line-height:1.1}
.ha-menu-panel a span{font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;color:#7E6534}
.ha-counsel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px clamp(20px,3vw,40px)}
.ha-swipe{display:none}
@media (max-width: 860px){
  .ha-nav{display:none !important}
  .ha-menu{display:block}
  .ha-hero-media{flex-basis:100% !important;max-width:none !important}
  .ha-hero-win{aspect-ratio:1.6 !important;clip-path:polygon(0 0,75% 0,100% 100%,25% 100%) !important}
  .ha-name{font-size:30px !important}
  .ha-principle{font-size:19px !important}
}
@media (max-width: 640px){
  .ha-hero-win{aspect-ratio:1.2 !important;clip-path:polygon(0 0,66% 0,100% 100%,34% 100%) !important}
  .ha-counsel-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;margin-left:calc(-1 * clamp(20px,4vw,48px));margin-right:calc(-1 * clamp(20px,4vw,48px));padding:0 clamp(20px,4vw,48px) 12px;scrollbar-width:none}
  .ha-counsel-grid::-webkit-scrollbar{display:none}
  .ha-counsel-grid > article{flex:0 0 80%;scroll-snap-align:start;animation:none !important}
  .ha-counsel-grid .ha-curtain{animation:none !important}
  .ha-swipe{display:block}
  .ha-matter{gap:16px !important}
}

@keyframes haDraw{from{transform:rotate(-22deg) scaleY(0)}to{transform:rotate(-22deg) scaleY(1)}}
@keyframes haUp{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes haWipe{from{translate:0 0}to{translate:101% 0}}
@keyframes haSettle{from{scale:1.32;opacity:.2}to{scale:1.14;opacity:1}}
@keyframes haPar{from{translate:0 -6%}to{translate:0 6%}}
@keyframes haGlyph{from{translate:0 22%}to{translate:0 -22%}}
@keyframes haLift{from{translate:0 0}to{translate:0 -110px}}
@keyframes haDrift{from{translate:0 90px}to{translate:0 -90px}}

@media (prefers-reduced-motion: no-preference){
  /* Hero intro, on load */
  .ha-in{animation:haUp 1.2s cubic-bezier(.2,.7,.2,1) both}
  .ha-in.d1{animation-delay:.15s}.ha-in.d2{animation-delay:.3s}.ha-in.d3{animation-delay:.55s}.ha-in.d4{animation-delay:.75s}
  .ha-draw{animation:haDraw 1.8s cubic-bezier(.2,.7,.2,1) .9s both}
  .ha-curtain-load{animation:haWipe 1.5s cubic-bezier(.75,0,.2,1) .4s both}
  .ha-hero-img{scale:1.14;animation:haSettle 2.4s cubic-bezier(.2,.7,.2,1) .4s both}

  @supports (animation-timeline: view()){
    /* Reveals as sections scroll in; d1–d3 stagger items that sit side by side */
    .ha-rv{animation:haUp linear both;animation-timeline:view();animation-range:entry 5% cover 26%}
    .ha-rv.d1{animation-range:entry 14% cover 32%}
    .ha-rv.d2{animation-range:entry 24% cover 38%}
    .ha-rv.d3{animation-range:entry 34% cover 44%}
    .ha-curtain-scroll{animation:haWipe linear both;animation-timeline:view();animation-range:entry 15% cover 45%}
    .ha-curtain-scroll.d2{animation-range:entry 25% cover 52%}
    .ha-curtain-scroll.d3{animation-range:entry 35% cover 58%}

    /* Parallax layers */
    .ha-par{animation:haPar linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .ha-hero-img{animation:haSettle 2.4s cubic-bezier(.2,.7,.2,1) .4s both,haPar linear both;animation-timeline:auto,view();animation-range:normal,cover 0% cover 100%}
    .ha-lift{animation:haLift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .ha-glyph{animation:haGlyph linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .ha-drift{animation:haDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .ha-draw-scroll{animation:haDraw linear both,haDrift linear both;animation-timeline:view(),view();animation-range:entry 0% cover 45%,cover 0% cover 100%}
  }
}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.od-back:hover{color:#C9AE7A}
.od-arrow{transition:translate .3s cubic-bezier(.2,.7,.2,1)}
.od-back:hover .od-arrow{translate:-4px 0}
@media (max-width: 640px){.od-note{display:none}}