/* ============================================================
   ABOUT US — full company story, in 7 premium blocks
   Colors come from the shared .room palette (css/palette.css) —
   same room as Services/Projects/Contact/Footer. No background of
   its own: the shared .site-canvas image (palette.css) shows
   straight through the whole section, same as everywhere else
   after the Hero.

   Structure (each an .about-block, separated by thin .about-divider
   hairlines, alternating layout so the long page never reads as one
   flat wall of text):
     1. Hero statement       — centered, big type
     2. Founder story        — split: portrait + copy
     3. Vision & Mission     — two cards, one hairline between
     4. Sister consultancy   — bordered panel
     5. Industries we serve  — icon grid (7) + hover-reactive circle
     6. Our expertise        — horizontal icon rows (5)
     7. Project experience   — stat + tag row
============================================================ */
#about{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:0 6vw 12vh;
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Purely decorative architectural line motif spanning the WHOLE
   section (js/about.js animates stroke-dashoffset once on scroll-in).
   Kept extremely faint — texture, not a graphic — matching the same
   restraint used everywhere else on the site. */
.about-blueprint{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.about-blueprint rect,
.about-blueprint line,
.about-blueprint circle{
  fill:none;
  stroke:var(--room-accent);
  stroke-width:1;
  opacity:0.12;
}

.about-block{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:7vh 0;
}

/* Thin centered divider between blocks — the same restrained
   "hairline" language used for content-caps/contact-meta borders
   elsewhere on the site, just used as a standalone rule here. */
.about-divider{
  position:relative;
  z-index:1;
  width:64px;
  height:1px;
  margin:0 auto;
  background:var(--room-border);
}

.about-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--room-text-muted);
  margin-bottom:16px;
}
.about-eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--room-accent);
  opacity:0.9;
}
.about-eyebrow.center{ justify-content:center; }

.about-block-title{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(26px, 2.8vw, 38px);
  line-height:1.18;
  letter-spacing:-0.01em;
  color:var(--room-text);
  margin-bottom:18px;
}
.about-block-title.center{ text-align:center; }

/* ==================== 1. HERO STATEMENT ==================== */
/* Compact intro — sized to its content, not forced to fill a full
   screen. Kept short on purpose so this block and the Founder Story
   right below it both read together within roughly one viewport,
   instead of each eating a full 100vh with mostly empty space. */
.about-hero-statement{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  max-width:820px;
  margin:0 auto;
  padding:5vh 0 4vh;
}
.about-hero-statement .about-eyebrow{ justify-content:center; }
.about-heading{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(28px, 3.4vw, 42px);
  line-height:1.14;
  letter-spacing:-0.01em;
  color:var(--room-text);
  margin-bottom:22px;
}
.about-heading .accent{ color:var(--room-accent); }
.about-lede{
  max-width:600px;
  margin:0 auto;
  font-size:17.5px;
  line-height:1.75;
  font-weight:300;
  color:rgba(47,36,27,0.75);
}

/* ==================== 2. FOUNDER STORY ==================== */
.about-founder{
  display:grid;
  grid-template-columns:minmax(240px, 32%) 1fr;
  gap:clamp(40px, 5vw, 80px);
  align-items:center;
  padding:3vh 0 6vh;
}
.about-portrait{ max-width:300px; }
.about-portrait-frame{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:4 / 5;
  background:var(--room-bg-2);
  box-shadow:
    0 40px 70px -30px rgba(47,36,27,0.24),
    0 10px 24px -14px rgba(47,36,27,0.10);
  /* Soft-reveal clip: js/about.js animates this from fully hidden to
     fully revealed on scroll — a calm "curtain" wipe, no scale/parallax. */
  clip-path:inset(0 0 0 0);
}
.about-portrait-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;
}
.about-portrait-caption{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--room-border);
}
.about-portrait-caption .name{
  font-family:'Fraunces', serif;
  font-size:15px;
  font-weight:600;
  color:var(--room-text);
}
.about-portrait-caption .role{
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--room-text-muted);
}
.about-founder-content{ max-width:580px; }
.about-story p{
  font-size:16px;
  line-height:1.75;
  font-weight:300;
  color:rgba(47,36,27,0.75);
  margin:0 0 16px;
}
.about-story p:last-child{ margin-bottom:0; }

/* ==================== 3. VISION & MISSION ==================== */
.about-vision-mission{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:stretch;
  text-align:center;
}
.about-vm-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width:420px;
  margin:0 auto;
}
.about-vm-label{
  font-family:'Fraunces', serif;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--room-accent);
  margin-bottom:14px;
}
.about-vm-text{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(18px, 1.9vw, 23px);
  line-height:1.55;
  color:var(--room-text);
}
.about-vm-divider{
  width:1px;
  background:var(--room-border);
}

/* ==================== 5. SISTER CONSULTANCY ==================== */
.about-sister{ max-width:760px; }
.about-sister-panel{
  text-align:center;
  padding:clamp(36px, 5vw, 56px);
  border:1px solid var(--room-border);
  border-radius:20px;
  background:rgba(255,255,255,0.22);
}
.about-sister-panel .about-eyebrow{ justify-content:center; }
.about-sister-text{
  font-size:16px;
  line-height:1.75;
  font-weight:300;
  color:rgba(47,36,27,0.75);
  max-width:540px;
  margin:0 auto;
}

/* ==================== 6. INDUSTRIES WE SERVE ==================== */
/* Editorial composition, bookended for symmetry: Hospitality and
   Industrial (.about-industry--feature) are full-width banners with
   identical treatment opening and closing the section, so the whole
   thing reads as deliberately balanced rather than lopsided. Between
   them the rhythm still varies row to row — thirds, then halves —
   instead of repeating the same card size seven times over, which is
   what keeps it from reading as a plain feature grid despite each
   individual row being symmetric. align-items:start lets the two
   half-width rows sit at their own natural height rather than
   stretching to match a neighbor. No decorative circle, no second
   column of content — the grid uses the section's full width. */
.about-industries{ text-align:center; }
.about-industry-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  align-items:start;
  gap:32px;
  margin-top:48px;
  text-align:left;
  /* Gives the cards' rotateX/rotateY/translateZ (the float animation
     and the icon's resting depth offset, below) real foreshortening
     instead of a flat skew. */
  perspective:1400px;
}
.about-industry:nth-child(1){ grid-column:span 12; } /* Hospitality — opening banner */
.about-industry:nth-child(2){ grid-column:span 4; }  /* Healthcare */
.about-industry:nth-child(3){ grid-column:span 4; }  /* Education */
.about-industry:nth-child(4){ grid-column:span 4; }  /* Corporate Offices */
.about-industry:nth-child(5){ grid-column:span 6; }  /* Commercial Spaces */
.about-industry:nth-child(6){ grid-column:span 6; }  /* Residential */
.about-industry:nth-child(7){ grid-column:span 12; } /* Industrial — closing banner */

/* 1023px, not 1100px: matches about.js's own isDesktop check
   (min-width:1024px) so this grid collapse and the GSAP-timeline ->
   reveal-lite / float -> static switches all happen at the same
   width instead of a stray band running stacked layout under the
   desktop animation path. */
@media (max-width:1023px){
  /* Simpler two-up rhythm once there isn't room for the 12-col
     composition — the two banners still span the full row, matching
     the desktop symmetry, everything else pairs up evenly. */
  .about-industry-grid{ grid-template-columns:repeat(2, 1fr); }
  .about-industry{ grid-column:span 1 !important; }
  .about-industry--feature{ grid-column:span 2 !important; }
}
@media (max-width:640px){
  .about-industry-grid{ grid-template-columns:1fr; gap:20px; }
  .about-industry, .about-industry--feature{ grid-column:span 1 !important; }
}

/* Premium architectural presentation panel: solid ivory surface (not
   a translucent "glass" tint), a thin warm hairline, soft layered
   shadow, comfortable padding. Always visible at rest — hover only
   deepens what's already there. cursor:default throughout: these are
   read-only information panels, not links, so nothing here should
   invite a click. */
.about-industry{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:26px 28px;
  border-radius:20px;
  cursor:default;
  background-color:#FBF8F2;
  border:1px solid #E8D8C2;
  box-shadow:0 18px 40px -24px rgba(47,36,27,0.2), 0 4px 14px -8px rgba(47,36,27,0.08);
  /* Lets the icon's own translateZ (below) actually sit forward of the
     card surface in the shared 3D space set up by the grid's
     perspective, instead of being flattened onto one plane. */
  transform-style:preserve-3d;
  transition:
    border-color 0.3s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
}
/* The two full-width "hero" banners: icon and text sit side by side
   (grid, not the default column stack) and the whole icon+text group
   is centered within the banner via justify-content:center — so on a
   wide screen the content reads as a deliberately centered
   presentation panel instead of small left-aligned text stranded in
   a mostly-empty box. */
.about-industry--feature{
  padding:36px 44px;
  display:grid;
  grid-template-columns:auto minmax(0, 560px);
  grid-template-rows:auto auto;
  column-gap:32px;
  row-gap:6px;
  align-items:center;
  justify-content:center;
}
.about-industry--feature .about-icon{
  grid-row:1 / 3;
  width:46px;
  height:46px;
}
.about-industry--feature .about-industry-title{
  grid-column:2;
  grid-row:1;
  align-self:end;
}
.about-industry--feature .about-industry-desc{
  grid-column:2;
  grid-row:2;
  align-self:start;
}

/* Continuous ambient float — was combining rotateX/rotateY (real 3D
   rotation, recomputed through the grid's shared perspective) with
   translate3d on all 7 cards simultaneously, forever. That's a heavy,
   permanent compositor load — three.js-grade work for a decorative
   idle animation — and was the actual cause of the reported cursor/
   scroll freeze while interacting with this section: hovering (which
   repaints a 4-layer box-shadow) landing on top of 7 cards' worth of
   continuous 3D recomputation was enough to choke the compositor.
   Flattened to translate3d (x/y only, no z) + a single cheap 2D
   rotate() — still reads as a gentle idle drift, just without the
   per-frame 3D matrix work. will-change hints the browser to keep
   each card on its own stable layer instead of repeatedly promoting/
   demoting it every cycle. */
@keyframes industry-float{
  0%   { transform:translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform:translate3d(3px, -7px, 0) rotate(0.4deg); }
  50%  { transform:translate3d(-3px, -11px, 0) rotate(-0.35deg); }
  75%  { transform:translate3d(4px, -5px, 0) rotate(0.45deg); }
  100% { transform:translate3d(0, 0, 0) rotate(0deg); }
}
.about-industry.is-floating{
  animation:industry-float var(--float-dur, 7s) ease-in-out infinite;
  animation-delay:var(--float-delay, 0s);
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .about-industry.is-floating{ animation:none; }
}

.about-industry::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:2px;
  background:var(--room-accent);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.about-industry > *{ position:relative; z-index:1; }
/* The blue glow reuses the same --color-glow-blue token the navbar's
   own glow uses (tokens.css) rather than inventing a second blue, so
   it reads as one consistent brand accent rather than a random neon
   color. Was 4 stacked shadows (two glow rings + two ambient depth
   shadows) — box-shadow is paint-bound, not compositor-accelerated,
   so every hover repaint was recomputing all 4 layers, one with a
   60px blur radius, on top of the still-running float animation on
   the other 6 cards. That combination is what produced the reported
   freeze. Collapsed to 2 layers: one glow ring, one depth shadow —
   same warm/blue read, roughly half the paint cost per hover. */
.about-industry:hover{
  border-color:#F0E2CC;
  box-shadow:
    0 0 36px 4px rgba(46,111,224,0.28),
    0 26px 52px -24px rgba(47,36,27,0.26);
}
.about-industry:hover::before{ transform:scaleY(1); }

/* translateZ lifts the icon slightly forward of the card's own
   surface within the shared 3D space (perspective on the grid +
   preserve-3d on the card, both above) — a static depth offset, not
   an animation, so it reads as the icon genuinely sitting a little
   closer to the viewer than the text beside it. Hover's scale is
   appended after the translateZ so the depth offset never resets. */
.about-industry .about-icon{
  transform:translateZ(22px);
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.about-industry--feature .about-icon{
  transform:translateZ(28px);
}
.about-industry .about-icon *{
  transition:stroke 0.3s cubic-bezier(0.22,1,0.36,1);
}
.about-industry:hover .about-icon{ transform:translateZ(22px) scale(1.05); }
.about-industry--feature:hover .about-icon{ transform:translateZ(28px) scale(1.05); }
.about-industry:hover .about-icon *{ stroke:var(--color-red, #B3241C); }

.about-industry-title{
  display:inline-block;
  font-family:'Fraunces', serif;
  font-size:16.5px;
  font-weight:500;
  color:var(--room-text);
}
.about-industry--feature .about-industry-title{
  font-size:20px;
}

.about-industry-desc{
  font-size:13.5px;
  line-height:1.6;
  color:var(--room-text-muted);
  font-weight:300;
  max-width:420px;
  opacity:0.8;
  transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1);
}
.about-industry:hover .about-industry-desc{ opacity:1; }

/* ==================== 6. OUR EXPERTISE ==================== */
/* Permanent elevated cards — not a hover-only effect. Each row always
   carries its own soft ivory card surface, champagne hairline and
   quiet shadow; hover only nudges those same properties a little
   further (never introduces them from nothing). These are read-only
   information cards, not links, so there's no arrow and no pointer
   cursor anywhere here. */
.about-expertise{ text-align:center; }
.about-expertise-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:40px;
  text-align:left;
}
.about-expertise-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:24px;
  min-height:100px;
  padding:22px 28px;
  border-radius:20px;
  cursor:default;
  background:rgba(255,253,248,0.82);
  border:1px solid #E8D8C2;
  box-shadow:
    0 14px 32px -20px rgba(47,36,27,0.16),
    0 2px 10px -6px rgba(47,36,27,0.08);
  transition:
    transform 0.32s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.32s cubic-bezier(0.22,1,0.36,1),
    border-color 0.32s cubic-bezier(0.22,1,0.36,1);
}
.about-expertise-card:hover{
  transform:translateY(-2.5px);
  box-shadow:
    0 20px 40px -22px rgba(47,36,27,0.2),
    0 4px 14px -8px rgba(47,36,27,0.1);
  border-color:#F1E3CB;
}

.about-expertise-card .about-icon{
  flex-shrink:0;
  width:30px;
  height:30px;
  margin-bottom:0;
  transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.about-expertise-card .about-icon *{
  transition:stroke 0.32s cubic-bezier(0.22,1,0.36,1);
}
.about-expertise-card:hover .about-icon{ transform:scale(1.05); }
.about-expertise-card:hover .about-icon *{ stroke:var(--room-accent); }

.about-expertise-title{
  display:block;
  font-family:'Fraunces', serif;
  font-size:17px;
  font-weight:500;
  color:var(--room-text);
  margin-bottom:4px;
}
.about-expertise-desc{
  display:block;
  font-size:13.5px;
  line-height:1.55;
  color:var(--room-text-muted);
  font-weight:300;
  max-width:520px;
}

/* -- Shared icon treatment (industries + expertise) -- */
.about-icon{
  width:28px;
  height:28px;
  margin-bottom:4px;
}
.about-icon *{
  fill:none;
  stroke:var(--room-accent);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ==================== 8. PROJECT EXPERIENCE ==================== */
.about-experience{ text-align:center; max-width:760px; }
.about-experience .about-eyebrow{ justify-content:center; }
.about-experience-lede{
  font-size:15.5px;
  line-height:1.7;
  font-weight:300;
  color:rgba(47,36,27,0.72);
  margin-bottom:28px;
}
.about-experience-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.about-experience-tags li{
  font-size:12.5px;
  letter-spacing:0.04em;
  color:var(--room-text);
  padding:9px 20px;
  border:1px solid var(--room-border);
  border-radius:999px;
  background:rgba(255,255,255,0.28);
}

/* ==================== RESPONSIVE ====================
   1023px, not 1100px — see the matching note above the Industries
   grid breakpoint: keeps every layout switch and the JS animation-mode
   switch (about.js isDesktop, min-width:1024px) aligned to one number. */
@media (max-width:1023px){
  .about-founder{
    grid-template-columns:1fr;
    gap:48px;
  }
  .about-portrait{ max-width:360px; margin:0 auto; }
  .about-founder-content{ max-width:none; }
  .about-industry-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* .reveal-lite (mobile/tablet lite-entrance utility, used here by
   initLiteReveals and also by js/contact.js) now lives in base.css
   since it's shared across sections, not About-specific. */

@media (max-width:640px){
  /* Mobile density pass — every value below is a deliberate ~25-35%
     cut from the desktop/tablet rhythm above, not that rhythm simply
     inherited at a smaller width. Section/block padding, heading
     margins and card padding all tighten together so the page reads
     as considered information density rather than shrunk spaciousness.
     A second pass on top of that cuts a further ~15-20% throughout —
     same treatment, tuned tighter still. */
  #about{ padding:4.4vh 5vw 3vh; }
  .about-block{ padding:2vh 0; }
  .about-eyebrow{ margin-bottom:7px; }
  .about-block-title{ font-size:clamp(22px, 7vw, 30px); margin-bottom:8px; }

  .about-hero-statement{ padding:1.8vh 0 1.4vh; }
  .about-heading{ font-size:clamp(24px, 7.5vw, 32px); margin-bottom:9px; line-height:1.05; }
  .about-lede{ font-size:14.5px; line-height:1.5; }

  .about-founder{ padding:1vh 0 1.8vh; gap:22px; }
  .about-portrait-caption{ margin-top:8px; padding-top:6px; }
  .about-story p{ font-size:15px; margin-bottom:8px; }

  .about-vision-mission{
    grid-template-columns:1fr;
    gap:14px;
  }
  .about-vm-divider{ width:100%; height:1px; }
  .about-vm-label{ margin-bottom:6px; }
  .about-vm-text{ font-size:17px; }

  .about-sister-panel{ padding:17px 16px; }
  .about-sister-text{ font-size:15px; }

  .about-industry-grid{ grid-template-columns:1fr; gap:10px; margin-top:18px; }
  .about-portrait{ max-width:260px; }
  .about-expertise-grid{ margin-top:16px; gap:8px; }
  .about-expertise-card{ gap:14px; padding:13px 15px; border-radius:16px; min-height:0; }
  .about-expertise-title{ font-size:15.5px; }
  .about-expertise-desc{ font-size:12.5px; }
  /* Matches the base rule's own .about-expertise-card .about-icon
     specificity (0,2,0) — the plain .about-icon override below this
     targets industries' cards, which use .about-icon undecorated, but
     can't win here against the more specific desktop rule regardless
     of media-query order. */
  .about-expertise-card .about-icon{ width:24px; height:24px; }
  .about-experience-lede{ font-size:14.5px; margin-bottom:12px; }
  .about-experience-tags li{ font-size:12px; padding:7px 14px; }

  /* The feature banners' side-by-side icon+text grid (built for a wide
     desktop row) has no room to breathe at phone widths — squeezing
     icon | minmax(0,560px) into ~300px of usable space read as
     cramped/misaligned next to the plain stacked cards around it. Once
     every card is a single column anyway, there's no reason for these
     two to look structurally different, so drop back to the same
     simple icon-above-title-above-desc stack as every other card, just
     with a little extra padding/icon size to still feel like the
     "hero" panels. This has to live in THIS later media block, not the
     earlier one further up the file — an equal-specificity .about-
     industry--feature rule declared after it there would otherwise
     still win the cascade regardless of which media query matches. */
  .about-industry{ padding:14px 15px; gap:6px; }
  .about-industry-title{ font-size:15px; }
  .about-industry-desc{ font-size:12.5px; }
  .about-icon{ width:24px; height:24px; }
  .about-industry--feature{
    display:flex;
    flex-direction:column;
    padding:16px 15px;
  }
  .about-industry--feature .about-icon{
    grid-row:auto;
    width:30px;
    height:30px;
  }
  .about-industry--feature .about-industry-title{
    font-size:18px;
  }
  .about-industry--feature .about-industry-title,
  .about-industry--feature .about-industry-desc{
    grid-column:auto;
    grid-row:auto;
    align-self:auto;
  }
}