/* Site-owned styles. GLightbox keeps its own separately loaded vendor stylesheet. */
@layer reset, tokens, base, layout, components, utilities;

@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-3-v15-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-3-v15-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/source-sans-3-v15-latin-700.woff2') format('woff2'); }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  button, input, textarea, select { font: inherit; }
  button { cursor: pointer; }
  button:disabled, input:disabled { cursor: default; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    --color-text: #555454;
    --color-heading: #7e7c7c;
    --color-brand: #db701c;
    --color-accent: #e6861f;
    --color-focus: #a96525;
    --color-surface: #fff;
    --color-panel: #f4f4f4;
    --color-border: #999;
    --font-body: 'Source Sans 3', sans-serif;
    --font-heading: Roboto, sans-serif;
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.25rem;
    --page-max: 60rem;
    --title-column: 14rem;
    --page-gutter: clamp(1rem, 3vw, 1.5rem);
  }
}

@layer base {
  html { color-scheme: light; }
  body { margin-block-start: .625rem; color: var(--color-text); background: var(--color-surface); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; }
  h1, h2, h3 { font-family: var(--font-heading); color: var(--color-heading); font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
  h1 { font-size: 2.5rem; margin-block-end: .5rem; }
  h2 { font-size: 1.6rem; margin-block-end: .625rem; }
  h3 { font-size: 1.4rem; margin-block: 1.25rem .625rem; }
  p { margin-block-end: .625rem; }
  a { color: var(--color-heading); text-underline-offset: .16em; }
  a:hover { color: var(--color-brand); }
  :where(a, button, input, textarea, select):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
  ::selection { color: var(--color-surface); background: var(--color-focus); }
  :where(input, textarea) { caret-color: var(--color-focus); }
  :where(ul, ol) { padding-inline-start: 1.5rem; margin-block: 0 .625rem; }
}

@layer layout {
  .b-container, .footer { inline-size: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }
  .content-wrap { display: grid; grid-template-columns: var(--title-column) minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
  .content-wrap > *, .flex-lg > * { min-inline-size: 0; }
  .content-wrap:has(> .content-header) { --title-column: 18rem; }
  .b-page-title { color: var(--color-accent); font-size: 1.6rem; font-weight: 400; text-transform: lowercase; line-height: 1.2; margin: .2rem 0 0; }
  .b-page-title__istext:not(.is_dark) { padding-inline-start: 2.875rem; }
  .b-page-title__istext.is_dark { align-self: stretch; background: var(--color-border); }
  .interior__istext { color: #f8f8f8; padding: 2.5rem 1.25rem 1.25rem 2.875rem; }
  .content-block { display: grid; grid-template-columns: var(--title-column) minmax(0, 1fr); column-gap: var(--space-3); margin-block-start: var(--space-3); }
  .content-block > * { grid-column: 2; }
  .content-block h2 { margin-block: 0 .625rem; }
  .flex-lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .portfolio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .collection-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .fancybox-gallery { columns: 3 10rem; column-gap: var(--space-2); }
  .fancybox-gallery a { display: block; break-inside: avoid; margin-block-end: var(--space-3); }
  .fancybox-gallery img { inline-size: 100%; }
  .footer-section { margin-block: clamp(3rem, 7vw, 6.25rem) 1rem; }
  .footer { display: flex; align-items: end; justify-content: space-between; gap: var(--space-2); border-block-start: 1px solid var(--color-border); padding-block-start: .625rem; }
  .social { display: flex; order: 1; flex-shrink: 0; gap: .5rem; }
  .social-link { display: block; padding: .625rem; }
  .social-link:hover { filter: sepia(); }
  .dash { color: #777; }
  .interior-copyright { color: var(--color-brand); }
}

@layer components {
  .navbar { position: relative; z-index: 10; margin-block-end: 1.25rem; background: var(--color-surface); }
  .nav-flex { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); }
  .brand-link { display: block; flex-shrink: 0; margin-block-end: .9375rem; }
  .logo { inline-size: 13.3125rem; block-size: auto; }
  .nav-menu { display: flex; align-items: end; gap: clamp(.5rem, 2vw, 2rem); margin-block-end: 1rem; }
  .nav-link { display: block; padding-block: 2.5rem 1.25rem; padding-inline: .75rem; font-family: var(--font-heading); text-transform: lowercase; text-align: center; text-decoration: none; color: #777; }
  .nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-brand); background: url('/assets/images/logo-box.png') center top / 1.875rem no-repeat; }
  .menu-button { display: none; border: 0; padding: 1.125rem; color: var(--color-accent); background: transparent; line-height: 1; }
  .menu-button svg { inline-size: 2.125rem; block-size: 2.125rem; }
  .menu-button[aria-expanded="true"] { color: var(--color-surface); background: var(--color-accent); }
  .portfolio-item { position: relative; min-inline-size: 0; }
  .portfolio-item > a { display: block; }
  .portfolio-item > a > img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; transition: filter .2s ease; }
  .portfolio-item-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; align-items: center; padding: 1.25rem .5rem; color: #fff; background: rgb(100 58 30 / .7); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
  .portfolio-item__titletext { inline-size: 100%; text-align: center; font-family: var(--font-heading); font-weight: 500; font-size: clamp(.8rem, 1.3vw, 1rem); }
  .portfolio-item-overlay .icon-search { position: absolute; inset-block-start: 35%; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 35%; }
  .portfolio-item:hover .portfolio-item-overlay, .portfolio-item:focus-within .portfolio-item-overlay { opacity: 1; visibility: visible; }
  .project-heading { font-size: clamp(1.6rem, 3vw, 2rem); }
  .project-client-wrapper { display: flex; flex-wrap: wrap; gap: .625rem; margin-block-start: .625rem; }
  .project-client-title, .project-client { display: inline; margin: 0; font-weight: 400; }
  .project-body { margin-block-start: 1.25rem; }
  .project-hero img, .hero_image, .hero_image img { inline-size: 100%; }
  .image-4 { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }
  .rtb, .project-body__rtb { overflow-wrap: anywhere; }
  :where(.rtb, .project-body__rtb) > :first-child { margin-block-start: 0; }
  :where(.rtb, .project-body__rtb) h2 { margin-block-start: 1.5rem; }
  :where(.rtb, .project-body__rtb) h3 { margin-block-start: 1.25rem; }
  :where(.rtb, .project-body__rtb) img { block-size: auto; max-inline-size: 100%; }
  :where(.rtb, .project-body__rtb) blockquote { margin-inline: 1.25rem; font-style: italic; }
  :where(.rtb, .project-body__rtb) table { border-collapse: collapse; max-inline-size: 100%; }
  :where(.rtb, .project-body__rtb) :where(th, td) { padding: .5rem; border: 1px solid var(--color-border); }
  .what-we-do-links { display: block; text-decoration: none; }
  .what-we-do-links img { inline-size: 100%; }
  .what-we-do-links:hover h3 { color: var(--color-brand); }
  .address { margin-block-start: 1.25rem; overflow-wrap: anywhere; }
  .address.med-down { display: none; }
  .form { container-type: inline-size; padding: var(--space-3); background: var(--color-panel); }
  .form label { display: block; margin-block-end: .3125rem; }
  .form :where(input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select) { display: block; inline-size: 100%; min-block-size: 2.75rem; margin-block-end: .625rem; border: 1px solid #aaa; border-radius: 0; padding: .5rem .75rem; color: var(--color-text); background: var(--color-surface); }
  .form textarea { min-block-size: 8rem; resize: vertical; }
  .form ::placeholder { color: #707070; opacity: 1; }
  .btn { display: inline-block; max-inline-size: 100%; min-block-size: 2.75rem; border: 0; padding: .625rem 1rem; color: #fff; background: #6b6969; cursor: pointer; white-space: normal; }
  .btn:hover { background: var(--color-focus); }
  .btn:disabled { opacity: .65; cursor: wait; }
  .html-embed { margin-block-end: var(--space-2); }
  .w-form-done, .w-form-fail { display: none; padding: var(--space-3); }
  .w-form-done { background: #e4eee3; }
  .w-form-fail { background: #f5dddd; }
  @container (max-width: 19rem) {
    .g-recaptcha { transform: scale(.8); transform-origin: left top; max-block-size: 4rem; }
  }
}

@layer utilities {
  .img-cover { object-fit: cover; }
  .empty-state { display: none; }
  .w-video.w-embed { aspect-ratio: 16 / 9; }
  @media (hover: hover) {
    .portfolio-item:hover > a > img, .portfolio-item:focus-within > a > img { filter: blur(3px); }
  }
  @media (hover: none) { .portfolio-item-overlay { opacity: 1; visibility: visible; } }
  @media (max-width: 991px) {
    .nav-flex { align-items: start; }
    .nav-menu { display: block; margin: 0; }
    .has-site-js .nav-menu { display: none; position: absolute; inset-block-start: 100%; inset-inline: 0; padding-block: .75rem; background: var(--color-surface); box-shadow: 0 6px 12px #0002; }
    .has-site-js .menu-is-open .nav-menu { display: block; }
    .has-site-js .menu-button { display: block; }
    .nav-link { padding: 1rem; }
    .nav-link:hover, .nav-link[aria-current="page"] { background-image: none; }
    html:not(.has-site-js) .nav-flex { flex-wrap: wrap; }
    html:not(.has-site-js) .nav-menu { flex-basis: 100%; inline-size: 100%; }
    .content-wrap:has(> .content-header) { grid-template-columns: minmax(0, 1fr); }
    .content-header .b-page-title__istext { padding-inline-start: 0; }
    .address { display: none; }
    .address.med-down { display: block; margin-block-start: 0; }
    .flex-lg { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 767px) {
    .content-wrap, .content-block { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
    .content-block > * { grid-column: 1; }
    .b-page-title__istext:not(.is_dark) { padding-inline-start: 0; }
    .b-page-title__istext.is_dark { display: none; }
    .portfolio, .collection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portfolio-item-overlay .icon-search { inset-block-start: 25%; }
    .footer { flex-direction: column; align-items: center; text-align: center; }
    .social { order: -1; flex-wrap: wrap; justify-content: center; }
    .break { display: block; }
  }
  @media (prefers-reduced-motion: reduce) {
    .portfolio-item-overlay, .portfolio-item > a > img { transition: none; }
    .glightbox-container * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}