:root{--cream:#f2eee4;--ink:#11110f;--brown:#795236;--gold:#b48655;--rule:#cfc5b6}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Georgia,"Times New Roman",serif}
a{color:inherit;text-decoration:none}img{display:block;width:100%}
.site-header{height:72px;padding:8px clamp(28px,3.8vw,66px);display:flex;align-items:center;justify-content:space-between;background:#f5f1e8;position:sticky;top:0;z-index:20;border-bottom:1px solid #d9d1c3}
.brand{display:flex;align-items:center;gap:13px}.brand .mark{width:62px;height:46px}.brand b{display:block;font-size:25px;letter-spacing:.17em;font-weight:400;white-space:nowrap}.brand small{display:block;font:8px Arial,sans-serif;letter-spacing:.34em;margin-top:3px}
nav{display:flex;align-items:center;gap:30px;font:9px Arial,sans-serif;letter-spacing:.09em}nav a{padding:7px 0}nav a:first-child{border-bottom:1px solid var(--brown)}nav .inquire{padding:15px 29px;background:var(--brown);color:#fff;font-weight:700}
.menu{display:none;background:none;border:0;letter-spacing:.15em}
.hero{position:relative;background:#111;overflow:hidden}.hero>img{width:100%;height:auto}.hotspot{position:absolute;display:block}.hotspot.work{left:5.3%;bottom:5%;width:18%;height:10%}.hotspot.story{left:25.2%;bottom:5%;width:13%;height:10%}

.divisions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;padding:14px 13px 18px;background:#f3efe6;border-bottom:1px solid #ded6c9}
.division-card{min-width:0}.division-card img{aspect-ratio:1.02;object-fit:cover}.division-copy{padding:12px 4px 7px}.division-copy h3{font-size:14px;line-height:1.05;letter-spacing:.045em;margin:0 0 9px;min-height:30px}.division-copy h3:after{content:"";display:block;width:26px;border-top:1px solid #9b7d60;margin-top:8px}.division-copy p{font-size:12px;line-height:1.3;min-height:32px;margin:0 0 10px}.view{font:700 9px Arial,sans-serif;letter-spacing:.08em}

.about{display:grid;grid-template-columns:46% 35% 19%;background:#11110f;color:#f3efe6;min-height:315px;overflow:hidden}
.portrait{min-width:0}.portrait img{height:100%;object-fit:cover;object-position:center 38%}
.about-copy{padding:38px 34px 30px}.eyebrow{font:9px Arial,sans-serif;letter-spacing:.23em;color:var(--gold);margin:0}
.about h1{font-weight:400;font-size:clamp(31px,3.1vw,49px);line-height:.96;margin:12px 0 17px;letter-spacing:-.025em}
.about-copy>p:not(.eyebrow){font-size:12.5px;line-height:1.52;margin:0 0 24px;max-width:590px}
.button{display:inline-block;background:var(--brown);color:white;padding:14px 25px;letter-spacing:.11em;font:10px Arial,sans-serif}
.about blockquote{margin:24px 24px 24px 0;border:1px solid #3d3b36;padding:27px 20px;font-size:20px;font-style:italic;line-height:1.3;align-self:stretch}
.about blockquote span{display:block;font:9px Arial,sans-serif;letter-spacing:.18em;margin-top:24px;font-style:normal}

.projects{padding:34px 28px 30px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:19px}.section-head h2{font-weight:400;font-size:40px;line-height:1;margin:8px 0 0}.section-head>a{font:10px Arial,sans-serif;letter-spacing:.1em;margin-bottom:5px}
.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.project-card img{aspect-ratio:1.43;object-fit:cover}.project-card h3{font-size:12px;letter-spacing:.065em;margin:9px 0 3px}.project-card p{font-size:11px;font-style:italic;color:#665c51;margin:0}

.materials{height:160px;background:#111;color:#fff;display:grid;grid-template-columns:29% 1fr 24%;overflow:hidden}.material-edge{background-size:cover;background-position:center}.material-edge.left{background-image:url("assets/images/materials-band-left.png")}.material-edge.right{background-image:url("assets/images/materials-band-right.png")}.material-message{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;letter-spacing:.115em;text-align:center}.material-message img{width:58px;filter:invert(1);margin-top:17px}
.contact{padding:62px clamp(25px,7vw,90px);text-align:center;background:#1a1916;color:#f4f0e7}.contact h2{font-weight:400;font-size:clamp(32px,4vw,48px);margin:12px 0 20px}
footer{background:#0e0e0d;color:#eee;padding:24px 5%;display:flex;align-items:center;justify-content:space-between}.footer-brand img{filter:invert(1)}.footer-brand b{font-size:17px}.footer-brand small{font-size:6.5px}

@media(min-width:1500px){
 .site-header{padding-left:42px;padding-right:48px}
 .divisions{gap:14px}.division-card img{aspect-ratio:1.03}
 .about{min-height:330px}.about-copy{padding-top:45px}.about h1{font-size:48px}
 .projects{padding-top:38px;padding-bottom:34px}
}
@media(max-width:1000px){
 .site-header{height:68px}.brand .mark{width:55px}.brand b{font-size:20px}.brand small{font-size:6.7px}nav{display:none}.menu{display:block}
 .hero>img{width:140%;max-width:none;transform:translateX(-7%)}.hotspot{display:none}
 .divisions{grid-template-columns:repeat(2,1fr);gap:18px}.division-card:last-child{grid-column:1/-1}.division-card:last-child img{aspect-ratio:1.8}
 .about{grid-template-columns:1fr 1fr}.portrait img{min-height:390px}.about blockquote{grid-column:1/-1;margin:0 28px 28px;padding:24px}
 .project-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
 .site-header{padding:8px 14px}.brand{gap:8px}.brand .mark{width:43px}.brand b{font-size:15px}.brand small{font-size:5.4px;letter-spacing:.19em}
 .hero>img{width:205%;transform:translateX(-19%)}
 .divisions{grid-template-columns:1fr;padding:10px 14px}.division-card:last-child{grid-column:auto}.division-card img,.division-card:last-child img{aspect-ratio:1.38}.division-copy{padding:12px 2px 18px}.division-copy h3{min-height:0}
 .about{grid-template-columns:1fr}.portrait img{min-height:0;max-height:430px}.about-copy{padding:34px 24px}.about blockquote{grid-column:auto;margin:0 24px 30px}
 .projects{padding:32px 16px}.section-head{align-items:flex-start}.section-head>a{display:none}.section-head h2{font-size:34px}.project-grid{grid-template-columns:1fr;gap:22px}
 .materials{height:145px;grid-template-columns:0 1fr 0}.material-message{font-size:14px;padding:20px}.contact{padding:50px 20px}
 footer{gap:18px;flex-direction:column;text-align:center}
}


/* V3 refinements */
html,body{max-width:100%;overflow-x:hidden}
.site-header{height:66px;padding-left:clamp(26px,3.3vw,58px);padding-right:clamp(26px,3.3vw,58px)}
.brand .mark{width:52px;height:43px;object-fit:contain;filter:brightness(0)}
.brand b{font-size:23px}
nav{gap:27px}

/* Give edge cards a deliberate gutter so no labels can be clipped. */
.divisions{padding-left:24px;padding-right:24px;gap:16px}
.division-copy{padding:14px 5px 9px}
.division-copy h3{font-weight:600;font-size:13.5px;letter-spacing:.055em}
.division-copy p{font-size:11.8px;line-height:1.42;color:#27231f}
.view{display:inline-block;margin-top:2px}

/* Founder spread: slightly calmer and more editorial. */
.about{grid-template-columns:45.5% 35.5% 19%}
.about-copy{padding:40px 38px 32px}
.about h1{font-size:clamp(30px,2.85vw,45px);line-height:.98}
.about-copy>p:not(.eyebrow){max-width:610px;line-height:1.58}
.about .button{padding:12px 22px}
.about blockquote{padding:29px 23px;font-size:19px}

/* Featured work gets a stronger introduction and protected edge gutters. */
.projects{padding:42px 32px 34px}
.section-head{margin-bottom:22px}
.section-head h2{font-size:42px}
.project-grid{gap:18px}
.project-card h3{font-size:12.5px;margin-top:11px}

/* Exact hero silhouette is reused in the materials band. */
.material-message img{width:58px;height:auto;object-fit:contain;filter:none}

/* More restrained final call-to-action. */
.contact{padding:58px 24px}
.contact h2{font-size:clamp(34px,3.4vw,47px)}

/* Deliberate footer instead of the oversized empty black field. */
.site-footer{min-height:130px;background:#0b0b0a;color:#f2eee4;padding:22px clamp(28px,5vw,76px);display:grid;grid-template-columns:1.2fr 1fr 1fr;align-items:center;gap:40px;border-top:1px solid #282622}
.footer-branding{display:flex;align-items:center;gap:20px}
.footer-branding img{width:76px;height:auto;filter:none}
.footer-branding strong{display:block;font-size:19px;letter-spacing:.16em;font-weight:400}
.footer-branding span{display:block;font:7px Arial,sans-serif;letter-spacing:.31em;margin-top:5px}
.footer-disciplines{display:flex;justify-content:center;gap:13px;font:9px Arial,sans-serif;letter-spacing:.17em;color:#b9aa99;white-space:nowrap}
.footer-meta{text-align:right}
.footer-meta small{font-size:10px;color:#b8b2a9}

/* Slightly compact sticky header after scrolling without JS animation dependency. */
@media(max-width:1000px){
 .site-header{height:64px;padding-left:18px;padding-right:18px}
 .divisions{padding-left:18px;padding-right:18px}
 .about{grid-template-columns:1fr 1fr}
 .site-footer{grid-template-columns:1fr 1fr}
 .footer-disciplines{display:none}
}
@media(max-width:600px){
 .site-header{height:60px;padding-left:12px;padding-right:12px}
 .brand .mark{width:39px;height:36px}
 .brand b{font-size:15px}
 .divisions{padding-left:14px;padding-right:14px}
 .projects{padding-left:18px;padding-right:18px}
 .site-footer{grid-template-columns:1fr;gap:25px;text-align:center}
 .footer-branding{justify-content:center}
 .footer-branding img{width:64px}
 .footer-meta{text-align:center}
}


/* V4 — hero scale refinement */
@media (min-width:1001px){
  .hero{
    height:min(72vh,720px);
    min-height:570px;
  }
  .hero>img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
  /* Hotspots track the scaled hero composition. */
  .hotspot.work{left:4.6%;bottom:4.5%;width:18.5%;height:10.5%}
  .hotspot.story{left:24.7%;bottom:4.5%;width:13.8%;height:10.5%}
}

/* On very tall desktop screens, keep the hero dramatic without becoming a full-screen wall. */
@media (min-width:1001px) and (min-height:900px){
  .hero{height:min(70vh,700px)}
}

/* Small mark cleanup and consistent rendering */
.brand .mark,
.material-message img,
.footer-branding img{
  object-fit:contain;
  object-position:center;
}


/* V5 — proportional hero correction. Entire approved composition remains visible. */
@media (min-width:1001px){
  .hero{
    height:auto !important;
    min-height:0 !important;
    overflow:hidden;
    line-height:0;
  }
  .hero>img{
    display:block;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
  }
  /* The hero source already contains all branding/buttons. Preserve its native ratio. */
  .hotspot.work{left:5.3%;bottom:5%;width:18%;height:10%}
  .hotspot.story{left:25.2%;bottom:5%;width:13%;height:10%}
}

/* Clean silhouette-only mark everywhere outside the hero. */
.brand .mark,
.material-message img,
.footer-branding img{
  content:url("assets/master-todd-silhouette.png");
}
.brand .mark{filter:brightness(0);width:52px;height:43px}
.material-message img,.footer-branding img{filter:none}

/* V8.1 — hero CTA click-target correction only.
   These invisible links now cover the complete baked-in buttons. */
@media (min-width:901px){
  .hotspot.work{
    left:4.5%;
    bottom:11%;
    width:18.2%;
    height:11%;
  }
  .hotspot.story{
    left:24.2%;
    bottom:11%;
    width:13.0%;
    height:11%;
  }
}

/* V8.2 — founder section bottom-edge alignment correction only */
.story-media,
.story-copy,
.story-quote {
  align-self: stretch;
}
.story-media img,
.story-image img,
.founder-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* V8.3 — exact founder-photo baseline fix.
   The actual HTML class is .portrait; V8.2 targeted unused class names. */
.about {
  align-items: stretch;
}
.portrait {
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  vertical-align: top;
}

/* V8.4 — structural founder-section alignment fix.
   The portrait no longer determines its own grid-row height.
   It is pinned to the exact top/bottom bounds of the .about grid cell. */
.about {
  position: relative;
  align-items: stretch;
  background: #11110f;
}
.portrait {
  position: relative;
  min-width: 0;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  align-self: stretch;
}
.portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center 38%;
}

/* Preserve the normal stacked image behavior on the one-column mobile layout. */
@media (max-width:600px) {
  .portrait {
    min-height: 360px;
  }
  .portrait img {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: none;
  }
}

/* V8.7 - remove the former Materials slogan band and unify the lower black field. */
.contact{background:#0b0b0a;}


/* MASTER HERO — live branding/text over clean photography.
   No branding is baked into the hero raster. */
.hero{
  position:relative;
  overflow:hidden;
  background:#111;
  line-height:normal;
}
.hero-stage{
  position:relative;
  width:100%;
  aspect-ratio:1024 / 434;
  overflow:hidden;
  container-type:inline-size;
}
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.hero-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.43) 0%,
    rgba(0,0,0,.28) 27%,
    rgba(0,0,0,.08) 48%,
    rgba(0,0,0,0) 68%);
}
.hero-branding{
  position:absolute;
  inset:0;
  color:#fff;
  pointer-events:none;
}
.hero-mark{
  position:absolute;
  left:8.9%;
  top:7.8%;
  width:17.6%;
  height:auto;
  object-fit:contain;
  filter:none;
}
.hero-name{
  position:absolute;
  left:4.0%;
  top:41.2%;
  font-family:Georgia,"Times New Roman",serif;
  font-size:5.05cqw;
  line-height:1;
  letter-spacing:.012em;
  font-weight:400;
  white-space:nowrap;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.hero-disciplines{
  position:absolute;
  left:5.0%;
  top:54.5%;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.42cqw;
  line-height:1;
  letter-spacing:.31em;
  font-weight:400;
  white-space:nowrap;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.hero-rule{
  position:absolute;
  left:24.4%;
  top:62.8%;
  width:4.2%;
  border-top:.12cqw solid rgba(255,255,255,.8);
}
.hero-tagline{
  position:absolute;
  left:5.5%;
  top:67.4%;
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.12cqw;
  line-height:1;
  font-style:italic;
  white-space:nowrap;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.hero-actions{
  position:absolute;
  left:4.5%;
  bottom:10.8%;
  display:flex;
  align-items:stretch;
  gap:1.55cqw;
  pointer-events:auto;
}
.hero-primary,
.hero-secondary{
  display:flex;
  align-items:center;
  justify-content:center;
  height:4.65cqw;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.02cqw;
  line-height:1;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.hero-primary{
  min-width:18.2cqw;
  padding:0 2.0cqw;
  background:#795236;
  color:#fff;
}
.hero-primary span{margin-left:1.0cqw;font-size:1.25cqw}
.hero-secondary{
  min-width:12.8cqw;
  padding:0 2.0cqw;
  border:.12cqw solid rgba(255,255,255,.95);
  color:#fff;
}

/* Old invisible hotspots are no longer needed because the buttons are live. */
.hotspot{display:none !important;}

@media(max-width:1000px){
  .hero-stage{
    width:140%;
    transform:translateX(-7%);
  }
}
@media(max-width:600px){
  .hero-stage{
    width:205%;
    transform:translateX(-19%);
  }
}