/* ==========================================================================
   TOP FRAME — SHARED PAGE SHELL
   Header, footer and contact block for EVERY page, homepage included.

   Defined once, here, so the bar never jumps between the homepage and an
   interior page. The homepage adds class="overlay" to <nav> so the bar floats
   over the scroll-tour hero and turns solid once scrolled - that is a COLOUR
   change only. Geometry is shared, so nothing shifts position on navigation.

   Design language: warm near-monochrome, hairlines instead of shadows,
   squared corners, generous air. Restraint is the point - the accent should
   appear two or three times per screen, never more.
   ========================================================================== */

:root{
  /* --- ink ------------------------------------------------------------- */
  --ink:#17140F;             /* warm near-black: headings, frames          */
  --ink-2:#3B352C;           /* secondary text                             */
  --ink-dim:#6E6559;         /* body copy                                  */
  --ink-mute:#928878;        /* captions, meta                             */

  /* --- grounds --------------------------------------------------------- */
  --paper:#FAF8F4;           /* page ground, warm off-white                */
  --paper-2:#F2EEE7;         /* alternating bands                          */
  --frame:#FFFFFF;           /* cards and product grounds                  */
  --ink-ground:#17140F;      /* footer / inverted sections                 */

  /* --- lines ----------------------------------------------------------- */
  --line:rgba(23,20,15,.13);
  --line-soft:rgba(23,20,15,.07);
  --line-inv:rgba(250,248,244,.16);

  /* --- accent: muted bronze, used sparingly ---------------------------- */
  --accent:#8A6F4E;
  --accent-deep:#6E573C;
  --accent-wash:rgba(138,111,78,.10);

  /* --- type ------------------------------------------------------------ */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,"Times New Roman",serif;
  --shell-sans:var(--sans);

  /* --- metrics --------------------------------------------------------- */
  --max:1240px;
  --shell-max:1240px;
  --gutter:clamp(20px,5vw,56px);
  --radius:3px;              /* squared, not rounded - this is architecture */
}

/* ---------- skip link (a11y + a direct route to main for crawlers) ------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
      padding:12px 20px;z-index:200;font-family:var(--sans);font-size:14px}
.skip:focus{left:0}

/* ============================ NAV ============================ */
/* One bar on a soft photographic banner.

   History worth keeping: a flat bar the same colour as the page ground had
   nothing to read against and dissolved into the page. A dark utility strip
   fixed that but put a hard black rule across the top of every page. This is
   the third attempt - the bar carries its own heavily washed band (the Austin
   skyline and treeline, cropped from the hero aerial) so it has a ground of
   its own without the black line. */

nav{position:sticky;top:0;z-index:100;
    transition:background .35s ease,border-color .35s ease}

.nav-main{
    background-color:var(--frame);
    /* The gradient is the legibility control - the image never carries text
       on its own. Tune the two alpha stops, not the image, if the links get
       hard to read. */
    background-image:linear-gradient(to bottom,rgba(250,248,244,.72),rgba(250,248,244,.90)),
                     url('/img/nav-banner.webp');
    background-size:cover;
    background-position:center 72%;
    background-repeat:no-repeat;
    border-bottom:1px solid rgba(23,20,15,.16);
    box-shadow:0 1px 0 rgba(23,20,15,.04), 0 10px 26px -22px rgba(23,20,15,.55);
    transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}

/* Homepage: the bar is FIXED so the hero runs under it, but it is solid there
   too - it used to go transparent over the photography and simply disappeared.
   Same ground, same border, same shadow on every page and at every scroll
   position. Do not reintroduce a transparent state. */
nav.overlay{position:fixed;top:0;left:0;right:0}

.nav-inner{max-width:1440px;margin:0 auto;padding:16px clamp(20px,3vw,40px);
           display:flex;align-items:center;justify-content:space-between;gap:28px}
.nav-inner .logo{display:flex;align-items:center;text-decoration:none;flex:none}
.nav-inner .logo img{display:block;height:64px;width:auto}
.nav-right{display:flex;align-items:center;gap:18px}
/* Uppercase, tracked and hairline-separated. Set in sentence case at weight 500
   it read as body copy that happened to sit in a bar - it had no authority. */
.nav-links{display:flex;align-items:center;gap:0}
.nav-links a{color:var(--ink);text-decoration:none;font-family:var(--sans);
             font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
             white-space:nowrap;padding:6px 14px;
             border-right:1px solid rgba(23,20,15,.16);
             transition:color .2s ease}
.nav-links a:first-child{padding-left:0}
.nav-links a:last-child{border-right:none;padding-right:0}
.nav-links a:hover{color:var(--accent)}
.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--accent)}

.nav-phone{color:var(--ink);text-decoration:none;font-family:var(--sans);
           font-size:12.5px;font-weight:600;white-space:nowrap;letter-spacing:.02em;
           font-variant-numeric:tabular-nums;transition:color .2s ease}
.nav-phone:hover{color:var(--accent)}

nav a.cta{background:var(--ink);color:var(--paper);text-decoration:none;font-family:var(--sans);
          font-weight:600;font-size:12.5px;padding:16px 28px;border-radius:var(--radius);
          letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
          transition:background .2s ease}
nav a.cta:hover{background:var(--accent-deep)}

.nav-toggle{display:none;background:none;border:none;width:30px;height:22px;position:relative;
            cursor:pointer;padding:0;flex:none}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;
    left:0;right:0;height:1.5px;background:var(--ink);border-radius:2px;
    transition:transform .25s ease,opacity .25s ease,background .25s ease}
.nav-toggle span{top:10px}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}

/* ============================ FOOTER ============================ */
/* Deep ink ground. Gives every page a base, and lets the warm paper above
   read as a deliberate choice rather than as plain white. */
footer{background:var(--ink-ground);border-top:none;padding:76px 0 34px;
       color:rgba(250,248,244,.62);font-family:var(--sans);font-size:14px;line-height:1.65}
.foot-wrap{max-width:var(--shell-max);margin:0 auto;padding:0 var(--gutter)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:42px}
.foot-grid img{height:34px;width:auto;display:block}
.foot-grid h3{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
              color:rgba(250,248,244,.95);margin:0 0 16px;font-weight:600}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:10px}
.foot-grid a{color:rgba(250,248,244,.62);text-decoration:none;transition:color .2s ease}
.foot-grid a:hover{color:var(--paper)}
.foot-about{font-size:14px;margin:20px 0 0;max-width:36ch;line-height:1.7}
.foot-nap{margin-top:20px;font-size:14px;line-height:1.8;font-style:normal}
.foot-nap b{color:rgba(250,248,244,.95);font-weight:600}
.foot-nap a{color:rgba(250,248,244,.62);text-decoration:none}
.foot-nap a:hover{color:var(--paper)}
.foot-bottom{margin-top:52px;padding-top:26px;border-top:1px solid var(--line-inv);font-size:12.5px;
             display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
             color:rgba(250,248,244,.45)}
.foot-bottom a{color:rgba(250,248,244,.45);text-decoration:none}
.foot-bottom a:hover{color:var(--paper)}

/* ============================ CONTACT BLOCK ============================ */
.contact-badge{display:flex;gap:16px;align-items:flex-start;margin-top:26px;font-family:var(--sans)}
.contact-badge .icon{width:38px;height:38px;border-radius:var(--radius);background:var(--accent-wash);
    color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.contact-badge .label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
                      color:var(--ink-mute);font-weight:600}
.contact-badge .value{margin-top:4px;font-size:16px;font-weight:500;color:var(--ink);line-height:1.5}
.contact-badge .value a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
                        transition:border-color .2s ease}
.contact-badge .value a:hover{border-bottom-color:var(--accent)}
.contact-badge .value.addr{font-weight:400;font-size:15px;color:var(--ink-dim)}

/* ============================ RESPONSIVE ============================ */
/* A 64px mark plus seven tracked uppercase items is a wide header, so it steps
   down in stages and hands over to the hamburger at 1080 rather than trying to
   cram the row onto a tablet. The type size and the tracking are the whole
   point of the row - they are the LAST things to give. */
/* The header has its own 1440 cap - WIDER than the 1240 page content - because
   the logo, seven tracked links, the phone and the CTA measure 1264 and never
   fitted 1240. Sizing this off the viewport was the bug that clipped the CTA
   above 1480px: the tightened values stopped applying while the container
   stayed 1240. Below 1440 the container is the viewport, so these steps are
   keyed to real available width. */
@media(max-width:1340px){
  /* Measured at 1265: the full-size row needs 1211 against 1189 available, so
     the mark comes down as well as the padding. Everything the brief said to
     keep - logo, all seven links, phone, CTA - stays on screen. */
  .nav-inner{gap:20px;padding-left:24px;padding-right:24px}
  .nav-inner .logo img{height:52px}
  .nav-links a{padding-left:9px;padding-right:9px}
  .nav-right{gap:14px}
}
@media(max-width:1260px){
  .nav-inner .logo img{height:50px}
  .nav-links a{padding-left:10px;padding-right:10px;font-size:11.5px;letter-spacing:.09em}
  nav a.cta{padding:14px 22px;font-size:11.5px}
}
@media(max-width:1180px){
  /* The phone is the first thing to give now it shares the bar with the links
     again - it is still in the footer of every page and on /contact/. */
  .nav-phone{display:none}
}

/* ---- hamburger from 1080 ----
   Measured: at 1085 the full row leaves 26px past the CTA, and there is no
   breakpoint between 1085 and 1024, so anything in that band overflowed. The
   handover has to happen where the row still fits, not 60px later. */
@media(max-width:1080px){
  .nav-inner .logo img{height:50px}
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
             gap:0;background:var(--frame);
             border-bottom:1px solid var(--line);
             box-shadow:0 14px 30px -20px rgba(23,20,15,.5);
             max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-links.open{max-height:560px}
  .nav-links a{padding:17px 26px;border-top:1px solid var(--line-soft);
               border-right:none;border-bottom:none;
               text-shadow:none;font-size:13px;letter-spacing:.12em}
  .nav-links a:first-child{padding-left:26px}
  .nav-links a:last-child{padding-right:26px}
  nav.overlay .nav-links a{text-shadow:none;border-right:none}
  nav.menu-open .nav-toggle span{background:transparent}
  nav.menu-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)}
  nav.menu-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)}
}

@media(max-width:940px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:700px){
  .nav-inner{padding:16px 16px}
  .nav-inner .logo img{height:42px}
  nav a.cta{padding:12px 13px;font-size:10.5px;letter-spacing:.07em}
  .nav-right{gap:11px}
  .nav-links a{padding:16px 20px}
  .nav-links a:first-child{padding-left:20px}
  .nav-links a:last-child{padding-right:20px}

  footer{padding:56px 0 30px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:380px){
  .nav-inner .logo img{height:36px}
  nav a.cta{padding:11px 11px;font-size:10px}
}
@media (prefers-reduced-motion: reduce){
  nav,nav .nav-main,nav a.cta,.nav-links,
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{transition:none}
}