/* ==========================================================================
   Tree-Wright Millworks — shared stylesheet
   Loaded by every page, so it is cached once and the other pages are cheap.

     1. Tokens      2. Base        3. Layout      4. Header
     5. Hero        6. Sections    7. Gallery     8. Contact
     9. Action bar 10. Footer     11. Lightbox   12. Responsive
   ========================================================================== */

/* -- 1. Tokens ----------------------------------------------------------- */
:root{
  /* palette — pulled from the logo */
  --forest:#111a14;
  --forest-2:#18231b;
  --ink-deep:#0b100d;
  --accent:#e0714a;          /* logo orange, lightened for contrast on dark */
  --sage:#c5d49d;            /* logo green */

  --text:#fff;
  --text-soft:rgba(255,255,255,.78);
  --text-faint:rgba(255,255,255,.60);
  --line:rgba(255,255,255,.20);
  --line-soft:rgba(255,255,255,.10);

  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --gutter:17px;
  --maxw:740px;
  --bar-h:60px;
  --bar-gap:12px;            /* raised by JS when the Netlify badge is present */

  --logo:url("../images/tree-wright-logo.webp");
}

/* -- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--forest);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  background:var(--forest);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bar-h) + var(--bar-gap) + 22px + env(safe-area-inset-bottom));
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.035em;
}

a{color:inherit;-webkit-tap-highlight-color:transparent}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--sage);
  outline-offset:3px;
  border-radius:4px;
}

.chip:active,.contact-item:active{
  transform:scale(.975);
  opacity:.85;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* -- 3. Layout ----------------------------------------------------------- */
.container{
  width:min(calc(100% - (var(--gutter) * 2)),var(--maxw));
  margin-inline:auto;
}

section{scroll-margin-top:84px}

/* Fixed photo backdrop. Two files: the small one is all a phone ever loads. */
.global-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:#20272d;
  background-image:url("../images/media-built-in-640.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 38%;
}
.global-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(10,16,20,.58);
}

/* -- 4. Header ----------------------------------------------------------- */
.header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(12,18,15,.93);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding-top:env(safe-area-inset-top);
}
.header-inner{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:0 0 auto;
}
.brand-mark{
  width:44px;
  height:44px;
  flex:0 0 auto;
  background-image:var(--logo);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1;
  min-width:0;
}
.brand-text strong{
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.brand-sub{
  margin-top:4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sage);
  white-space:nowrap;
}

/* Two links now that Work and Contact are their own pages, so nothing has to
   scroll sideways or get clipped at the edge. */
.quick-nav{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.nav-link{
  flex:0 0 auto;
  text-decoration:none;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  padding:14px 16px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  transition:transform .18s cubic-bezier(.2,.75,.3,1),background .2s ease,
             border-color .2s ease,box-shadow .2s ease;
}
.nav-link:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.26);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.nav-link:active{
  transform:translateY(0) scale(.96);
  box-shadow:none;
  transition-duration:.06s;
}

/* The two menu buttons drop in just after the page paints. Once. */
@keyframes nav-drop{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:none}
}
.nav-link{animation:nav-drop .5s cubic-bezier(.2,.75,.3,1) backwards}
.quick-nav .nav-link:nth-child(1){animation-delay:.15s}
.quick-nav .nav-link:nth-child(2){animation-delay:.25s}
.nav-link[aria-current="page"]{
  background:rgba(197,212,157,.16);
  border-color:rgba(197,212,157,.4);
  color:var(--sage);
}

/* -- 5. Hero ------------------------------------------------------------- */
.hero{
  position:relative;
  z-index:1;
  min-height:min(760px,92vh);      /* iOS before 15.4 */
  min-height:min(760px,92svh);
  display:flex;
  align-items:flex-end;
}
.hero-content{padding:120px 0 84px}

.eyebrow,.kicker{
  margin:0 0 15px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.eyebrow{color:rgba(255,255,255,.86)}
.kicker{color:var(--accent)}
.kicker.light{color:var(--sage)}

.hero h1{
  margin:0;
  max-width:8ch;
  font-size:clamp(56px,17vw,84px);
  line-height:.86;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero-copy{
  max-width:34ch;
  margin:28px 0 0;
  color:var(--text-soft);
  font-size:15.5px;
  line-height:1.68;
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}

/* Typewriter. The real headline stays in the markup for search engines and
   screen readers; a hidden copy holds the space so nothing jumps while it
   types. */
.type{position:relative}
.type-ghost{display:block;visibility:hidden}
.type-live{
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:block;
}
/* The caret hangs off a zero-sized anchor, so it is painted beside the text
   without joining the line box — an inline caret makes the line taller and the
   whole headline drops a couple of pixels the moment it disappears. */
.caret-slot{
  position:relative;
  display:inline-block;
  width:0;
  height:0;
  vertical-align:baseline;
}
.caret{
  position:absolute;
  left:.06em;
  bottom:-.04em;
  width:.055em;
  height:.78em;
  background:var(--accent);
  animation:blink 1.05s steps(1) infinite;
}
.caret.done{animation:fade-out .4s ease .5s forwards}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes fade-out{to{opacity:0}}

/* Before the script runs, and if it never does, the headline simply shows. */
.type:not(.is-typing) .type-ghost{visibility:visible}
.type:not(.is-typing) .type-live{display:none}

.actions{
  display:grid;
  gap:10px;
  max-width:260px;
  margin-top:34px;
}
.button{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:999px;
  padding:0 22px;
  font-size:15.5px;          /* 20% up from 13px, still fits the narrowest phone */
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s ease,
             background .2s ease,border-color .2s ease;
}
.button.primary{background:var(--accent);color:#1a0d07}

/* The two buttons under the headline carry more motion than anything else on
   the page: they lift further, a slow sheen crosses them, and they spring back
   when pressed. Everything is short and damped, so it reads as finish rather
   than flash. */
.button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  will-change:transform;
}
.button > *{position:relative;z-index:1}
.button::after{                       /* the sheen */
  content:"";
  position:absolute;
  top:-60%;
  bottom:-60%;
  left:-40%;
  width:36%;
  transform:translateX(-260%) rotate(14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  pointer-events:none;
  z-index:0;
}
.button:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.34);
}
.button.ghost:hover{border-color:rgba(255,255,255,.4)}
.button:hover::after{animation:sheen .85s cubic-bezier(.3,.6,.3,1)}
.button:active{
  transform:translateY(-1px) scale(.975);
  box-shadow:0 6px 14px rgba(0,0,0,.3);
  transition-duration:.08s;
}
@keyframes sheen{
  from{transform:translateX(-260%) rotate(14deg)}
  to{transform:translateX(560%) rotate(14deg)}
}

/* They also arrive a beat after the page, one behind the other. */
@keyframes button-rise{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:none}
}
.hero .actions .button{
  animation:button-rise .62s cubic-bezier(.2,.8,.25,1) backwards;
}
.hero .actions .button:nth-child(1){animation-delay:.42s}
.hero .actions .button:nth-child(2){animation-delay:.56s}
.button.ghost{
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
}
.button.ghost:hover{background:rgba(255,255,255,.12)}

/* Page heads on Work and Contact: shorter than the home hero. */
.page-head{
  position:relative;
  z-index:1;
  padding:64px 0 10px;
}
.page-head h1{
  margin:0;
  font-size:clamp(44px,12vw,68px);
  line-height:.94;
  text-wrap:balance;
}
.page-head p{
  margin:20px 0 0;
  max-width:52ch;
  color:var(--text-soft);
  font-size:15px;
  line-height:1.7;
}

/* -- 6. Sections --------------------------------------------------------- */
.section{
  position:relative;
  z-index:1;
  padding:92px 0;
}
.section h2{
  margin:0 0 26px;
  font-size:clamp(46px,13vw,64px);
  line-height:.94;
  text-wrap:balance;
}
.section p{
  margin:0;
  max-width:60ch;
  color:var(--text-soft);
  font-size:15px;
  line-height:1.72;
}

.service-list{
  margin-top:56px;
  border-top:1px solid var(--line);
}
.service-row{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:18px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.service-row > span{
  color:var(--text-faint);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  padding-top:6px;
}
.service-row h3{margin:0 0 6px;font-size:25px}
.service-row p{font-size:14px}

/* -- 7. Gallery ---------------------------------------------------------- */
/* The logo sits behind these sections as a faint texture. */
.logo-phase{
  position:relative;
  z-index:2;
  isolation:isolate;
  background:var(--forest);
  border-top:1px solid var(--line-soft);
}
.logo-sticky-bg{
  position:sticky;
  top:0;
  z-index:0;
  height:100vh;                    /* iOS before 15.4 */
  margin-bottom:-100vh;
  height:100svh;
  margin-bottom:-100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 44%,rgba(85,102,88,.26),transparent 48%),
    linear-gradient(180deg,var(--forest) 0%,var(--forest-2) 55%,#101713 100%);
}
.logo-sticky-bg::before{
  content:"";
  width:min(86vw,400px);
  aspect-ratio:1;
  max-height:58vh;
  max-height:58svh;
  background-image:var(--logo);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.13;
  filter:saturate(.85);
}
.logo-phase-content{position:relative;z-index:1}

.gallery-head{margin-bottom:34px}

.cat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:28px 0 8px;
}
.cat{
  position:relative;
  display:block;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:3px;
  text-decoration:none;
  background:#1b231d;
  box-shadow:0 14px 36px rgba(0,0,0,.30);
  transition:transform .12s ease;
}
.cat img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s ease;
}
.cat::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(8,12,9,.88),rgba(8,12,9,.20) 58%,rgba(8,12,9,.06));
}
.cat-label{
  position:absolute;
  z-index:2;
  left:15px;right:15px;bottom:13px;
  color:#fff;
}
.cat-label b{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:21px;
  letter-spacing:-.02em;
  line-height:1.05;
}
.cat-label span{
  display:block;
  margin-top:3px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.cat:hover img{transform:scale(1.06)}
.cat:active{transform:scale(.985)}

.gallery-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:26px 0 30px;
}
.chip{
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:999px;
  padding:14px 18px;
  font-size:12.5px;
  font-weight:700;
  background:rgba(255,255,255,.05);
  transition:transform .08s ease,opacity .08s ease,background .15s ease;
}
.chip:hover{background:rgba(255,255,255,.12)}

.project-group{
  margin-top:66px;
  scroll-margin-top:96px;
}
.project-group:first-of-type{margin-top:0}
.project-group h3{margin:0 0 18px;font-size:32px}

.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 8px;
  align-items:start;
}
/* Each gallery picks ONE tile shape, so every row lines up.
   Set per group with --tile on .project-group. */
.photo{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:#1b231d;
  aspect-ratio:var(--tile,4 / 3);
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  cursor:zoom-in;
}
.photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.photo:hover img{transform:scale(1.04)}

.shot{margin:0}
.shot figcaption{
  margin-top:7px;
  font-size:12.5px;
  line-height:1.35;
  color:var(--text-faint);
  letter-spacing:.01em;
}

.back-link{
  display:inline-block;
  margin-top:22px;
  padding:13px 0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  text-decoration:none;
  border-bottom:1px solid var(--line-soft);
  padding-bottom:3px;
}
.back-link:hover{color:var(--text-soft)}

/* -- 8. Contact ---------------------------------------------------------- */
.region{
  margin:34px 0 0;
  padding:12px 0;
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(56px,20vw,92px);
  line-height:.8;
  color:rgba(255,255,255,.12);
  user-select:none;
}
.contact-stack{
  margin-top:38px;
  border-top:1px solid var(--line);
}
.contact-item{
  min-height:86px;
  display:grid;
  grid-template-columns:76px 1fr auto;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:var(--text);
  border-bottom:1px solid var(--line);
  transition:transform .08s ease,opacity .08s ease;
}
.contact-item small{
  color:var(--text-faint);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.contact-item strong{
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
  overflow-wrap:anywhere;
}
.contact-item .arrow{color:var(--accent);font-size:18px}
/* The address is long for a phone: it steps down a little and breaks after the
   @ rather than mid-word. */
.contact-item strong.email{
  font-size:clamp(16px,4.6vw,20px);
  overflow-wrap:break-word;
}

.pane{display:block}

/* -- 9. Action bar ------------------------------------------------------- */
/* Netlify pins a "Powered by Netlify" badge to the bottom-right corner, which
   landed straight on top of the Text button. The script adds .has-badge and the
   bar lifts clear of it; turn the badge off in Netlify and the bar drops back
   on its own. */
.mobile-bar{
  position:fixed;
  z-index:80;
  left:14px;
  right:14px;
  bottom:max(var(--bar-gap),calc(env(safe-area-inset-bottom) + 4px));
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:6px;
  min-height:var(--bar-h);
  border-radius:20px;
  background:rgba(11,16,13,.92);
  border:1px solid var(--line-soft);
  box-shadow:0 18px 46px rgba(0,0,0,.4);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:bottom .2s ease;
}
.has-badge .mobile-bar{--bar-gap:86px}

.bar-link{
  position:relative;
  display:grid;
  place-items:center;
  min-height:48px;
  border-radius:15px;
  color:#fff;
  text-decoration:none;
  font-size:15px;            /* 20% up from 12.5px */
  font-weight:700;
  letter-spacing:.02em;
  border-right:1px solid var(--line-soft);
  overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.75,.3,1),background .25s ease;
}
.bar-link:last-child{border-right:0}
.bar-link:hover{background:rgba(255,255,255,.07)}

/* Pressing Call or Text lights the button from the middle and dips it, so a
   tap is acknowledged even while the phone is still opening. */
.bar-link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at center,rgba(224,113,74,.6),rgba(224,113,74,0) 72%);
  opacity:0;
  transform:scale(.55);
  pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
.bar-link span{position:relative;z-index:1}
.bar-link:active{transform:scale(.965)}
.bar-link:active::before{
  opacity:1;
  transform:scale(1.25);
  transition-duration:.12s;
}

/* -- 10. Footer ---------------------------------------------------------- */
.footer{
  position:relative;
  z-index:2;
  background:var(--ink-deep);
  border-top:1px solid var(--line-soft);
  padding:38px 0 34px;
}
.footer p{
  margin:0;
  color:var(--text-faint);
  font-size:12.5px;
  line-height:1.7;
}
.footer a{color:var(--text-soft)}
.footer nav{margin-top:8px;display:flex;gap:20px}
.footer nav a{
  display:inline-block;
  padding:13px 0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-faint);
}
.footer nav a:hover{color:var(--text)}

/* -- 11. Lightbox -------------------------------------------------------- */
.lb{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  place-items:center;
  background:rgba(6,9,7,.94);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
}
.lb.is-open{display:grid}
.lb-img{
  max-width:min(100%,1300px);
  max-height:78svh;
  object-fit:contain;
  border-radius:3px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lb-cap{
  margin-top:16px;
  text-align:center;
  color:rgba(255,255,255,.82);
  font-size:14px;
  letter-spacing:.01em;
}
.lb-cap b{
  display:block;
  margin-top:5px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.lb-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  color:#fff;
  border-radius:999px;
  font-size:19px;
  cursor:pointer;
  line-height:1;
}
.lb-prev{left:12px}
.lb-next{right:12px}
.lb-close{
  position:absolute;
  top:max(12px,env(safe-area-inset-top));
  right:12px;
  transform:none;
}
.lb-btn:hover{background:rgba(255,255,255,.16)}

/* -- 12. Responsive ------------------------------------------------------ */
/* Phones: skip the frosted-glass blur. At 93% opacity you cannot see it, and
   on older iPhones blurring a fixed bar behind a scrolling page is one of the
   most expensive things a page can ask for. */
@media (max-width:699px){
  .header,.mobile-bar{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(11,16,13,.97);
  }
}

@media (max-width:429px){
  .brand{gap:8px}
  .brand-mark{width:40px;height:40px}
  .brand-text strong{font-size:17px}
  .brand-sub{font-size:10px;letter-spacing:.18em}
  .nav-link{padding:14px 13px;font-size:12px}
}
@media (max-width:339px){
  .brand-text{
    position:absolute;width:1px;height:1px;
    margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;
  }
}

@media (max-width:699px){
  .lb-btn{width:42px;height:42px;font-size:17px}
  .lb-prev{left:6px}
  .lb-next{right:6px}
}

@media (min-width:700px){
  :root{--gutter:28px;--maxw:980px}
  .global-bg{
    background-image:url("../images/media-built-in-1280.jpg");
    background-position:center 42%;
  }
  .hero{min-height:min(800px,90svh)}
  .hero-content{padding:150px 0 100px}
  .hero h1{font-size:clamp(84px,9vw,98px);max-width:11ch}
  .page-head{padding:84px 0 10px}
  .section{padding:112px 0}
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .cat-label b{font-size:19px}
  .gallery{grid-template-columns:repeat(3,1fr);gap:16px 14px}
  .logo-sticky-bg::before{width:min(46vw,460px);opacity:.11}
  .actions{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
  .mobile-bar{left:auto;right:28px;width:300px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}