/* ATX static site shell. Header and footer-logo rules copied from the Google lander
   (landers/book-headshots-austin/index.html, #sq-rebuild), which rebuilt Squarespace's header in plain CSS.
   Generated by tools/port/shell.mjs; do not hand-edit (put design changes in tweaks.css). */
:root{
  --sqs-site-gutter:2vw;
  --sqs-mobile-site-gutter:6vw;
  --sqs-site-max-width:1500px;
  --ink:#1d1a16;--paper:#f8f8f7;--light:#eeeeec;--white:#f7f7f6;
  --header-h:78.77px;
}

html{scroll-behavior:smooth}
.header-skip-link{font-family:inherit!important}
/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:10;color:var(--paper);background:rgba(29,26,22,0);transition:background .3s ease-in-out,padding .14s ease-in-out}
.header.shrink{background:var(--ink);transition:background .14s ease-in-out .14s}
.header-skip-link{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 14px;z-index:20;font-size:14px}
.header-skip-link:focus{left:0}
.header-inner{position:relative;z-index:12;display:flex;align-items:center;justify-content:space-between;padding:1vw 2vw;max-width:none}
.header-logo{display:block;flex:0 0 auto}
.header-logo img{display:block;height:50px;width:auto;max-width:100%;max-height:50px}
.header-nav{display:inline-flex;align-items:center;gap:36px;margin-left:auto}
.nav-item,.nav-folder{position:relative}
.header a,.header button{color:var(--paper);font-family:Inter,sans-serif;font-size:16px;line-height:27.2px;text-decoration:none}
.header-nav a,.nav-folder-title{display:block;padding:1.6px 0;font-weight:400;letter-spacing:normal;background:none;border:0;margin:0;cursor:pointer;text-align:left}
.nav-folder-content{display:none;position:absolute;top:100%;right:-16px;background:var(--ink);padding:8px 16px;white-space:nowrap;text-align:right;z-index:13}
.nav-folder:hover .nav-folder-content,.nav-folder:focus-within .nav-folder-content,.nav-folder.is-open .nav-folder-content{display:block}
.nav-folder-content a{line-height:20.8px;padding:1.6px 0;text-align:right}
.burger{display:none;background:none;border:0;padding:1px 6px;margin:0;cursor:pointer;width:47px;height:37px;color:var(--paper)}
.burger-box{position:relative;display:block;width:35px;height:35px}
.bun{position:absolute;left:0;width:35px;height:1px;background:var(--paper);transition:transform .25s ease,top .25s ease,opacity .25s}
.top-bun{top:11px;transform:translateY(.5px)}
.bottom-bun{top:22px;transform:translateY(.5px)}
.header--menu-open .top-bun{top:17px;transform:rotate(45deg) scaleX(.8)}
.header--menu-open .bottom-bun{top:17px;transform:rotate(-45deg) scaleX(.8)}
.header-menu{display:none}

@media (max-width:799px){
  .header-inner{padding:6vw;align-items:center}
  .header.shrink .header-inner{padding-top:4.33vw;padding-bottom:4.33vw}
  .header-logo img{height:min(40px,8.84vw);max-height:40px}
  .header-nav{display:none}
  .burger{display:block}
  .header-menu{display:flex;position:fixed;left:0;right:0;top:0;bottom:0;z-index:10;background:var(--ink);flex-direction:column;justify-content:center;align-items:center;padding-top:var(--header-h);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;overflow:hidden}
  .header--menu-open .header-menu{opacity:1;visibility:visible;transition:opacity .3s ease}
  .header--menu-open{background:var(--ink)}
  .menu-panel{display:none;width:100%;text-align:center}
  .menu-panel.is-active{display:block}
  .menu-link{display:block;width:100%;background:none;border:0;margin:0;padding:3vw 7vw;color:var(--paper);font-family:Inter,sans-serif;font-size:8.5vw;line-height:1;text-align:center;text-decoration:none;cursor:pointer}
  .header .menu-link{font-size:8.5vw;line-height:1;box-sizing:border-box}
  .menu-folder{display:flex;align-items:center;justify-content:center;gap:.15em}
  .menu-folder span{max-width:calc(100% - 1.4em)}
  .menu-chev{flex:0 0 auto;width:.95em;height:.95em}
}


/* Pages whose Squarespace header used the light theme (blog, FAQ, about...): dark text over the light first section. */
.header.header--light{color:var(--ink)}
.header.header--light a,.header.header--light button{color:var(--ink)}
.header.header--light .bun{background:var(--ink)}
.header.header--light.shrink{background:var(--paper)}
.header.header--light .nav-folder-content{background:var(--paper)}
@media (max-width:799px){
  .header.header--light.header--menu-open{background:var(--ink)}
  .header.header--light.header--menu-open a,.header.header--light.header--menu-open button{color:var(--paper)}
  .header.header--light.header--menu-open .bun{background:var(--paper)}
}
/* Header-overlap fix: the header is fixed and transparent over the first section, so the first
   section is pushed down by the header height (Squarespace did this with JavaScript). */
#page .atx-first{padding-top:var(--header-h)}
@media (max-width:799px){:root{--header-h:83.78px}}
/* Blog index: Squarespace hid the masonry cards (opacity 0, absolute) until its JavaScript placed them.
   Static grid with the site's own masonry settings: 2 columns, 150px column and 100px row spacing. */
.blog-masonry-wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:150px;row-gap:100px;align-items:start}
.blog-masonry .entry{position:relative!important;opacity:1!important;top:auto!important;left:auto!important}
@media (max-width:767px){.blog-masonry-wrapper{grid-template-columns:1fr;row-gap:60px}}
/* Squarespace image blocks' lazy images: the static copy loads them natively. */
img[data-src]{opacity:1}
/* footer logo + text block */
.footer-logo{display:block;position:relative;width:100%;height:100%}
.footer-logo img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block}
#block-3ff5a0d30a7aa9764ecc .sqs-block-content{height:100%}
.sqs-html-content{position:relative;z-index:0}
#footer-sections .sqs-html-content p{margin:0}


/* ===== Design tweak layer, shell part (TWEAK-LAYER-2026-10-27.md; the rest is in tweaks.css) ===== */
/* Fix 5. The header is solid ink at every scroll position and on every page. The transparent state left the
   white "ATX" of the logo invisible on light first sections (lawyer, FAQ, blog...). It stays position:fixed
   with the first section pushed below it (.atx-first above), which is what the read's position:sticky does,
   without reflowing the vh-sized heroes. The light variant now uses the dark bar's colours. */
.header,.header.shrink,.header.header--light,.header.header--light.shrink{background:var(--ink)!important;color:var(--paper)}
.header.header--light a,.header.header--light button{color:var(--paper)}
.header.header--light .bun{background:var(--paper)}
.header.header--light .nav-folder-content{background:var(--ink)}
html{scroll-padding-top:84px}
/* Fix 10. The "Matches your firm." bento tile (booking system, .atxB__wc) was 60% empty white: it becomes
   a dark tile, centred, pairing diagonally with the dark "48h" tile. Text unchanged. */
.atxB__card.atxB__wc{background:var(--ink);color:#F7F7F6;border:0;justify-content:center}
.atxB__card.atxB__wc .atxB__c{margin-top:0;padding:32px}