@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

.phrd-about{
  --paper:#f7f3e7;
  --paper-2:#efe6cf;
  --teal-deep:#082e2a;
  --teal-deep-2:#0c3d37;
  --teal:#0e6b5c;
  --teal-light:#e2ede8;
  --ink:#182420;
  --ink-soft:rgba(24,36,32,0.64);
  --ink-faint:rgba(24,36,32,0.42);
  --on-teal:#f3efe0;
  --on-teal-soft:rgba(243,239,224,0.66);
  --on-teal-faint:rgba(243,239,224,0.4);
  --crimson:#c1453c;
  --crimson-deep:#9c3a33;
  --gold:#dba647;
  --line:rgba(24,36,32,0.12);
  --line-on-teal:rgba(243,239,224,0.16);
  --display:'Newsreader', serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --maxw:1180px;
}

.phrd-about, .phrd-about *{box-sizing:border-box; margin:0; padding:0;}
@media (prefers-reduced-motion: reduce){ .phrd-about *{ animation:none !important; transition:none !important; } }

.phrd-about{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.phrd-about img{max-width:100%; display:block;}
.phrd-about a{color:inherit; text-decoration:none;}
.phrd-about a:focus-visible, .phrd-about button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.phrd-about .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

.phrd-about .eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.phrd-about .eyebrow::before{
  content:"";
  width:14px; height:1px;
  background:currentColor;
  display:inline-block;
}

/* ============ AMBIENT CONTOUR TEXTURE ============ */
.phrd-about .contours{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0.5;
}

/* ============ HERO ============ */
.phrd-about .hero{
  position:relative;
  background:var(--teal-deep);
  border-bottom:1px solid var(--line-on-teal);
  overflow:hidden;
  min-height:620px;
  display:flex;
  align-items:center;
}
.phrd-about .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.phrd-about .hero-bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 25%;
  filter:blur(0px) saturate(0.5) brightness(0.92);
  transform:scale(1);
}
.phrd-about .hero-bg-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(219,166,71,0.14), transparent 60%),
    linear-gradient(180deg, rgba(8,46,42,0.82), rgba(8,46,42,0.9));
}
.phrd-about .hero-inner{
  position:relative;
  z-index:2;
  padding:96px 28px;
  max-width:760px;
}
.phrd-about .hero-inner .eyebrow{ color:var(--gold); margin-bottom:24px; }
.phrd-about .hero-inner h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(34px, 4.1vw, 54px);
  line-height:1.14;
  color:var(--on-teal);
  letter-spacing:-0.01em;
  max-width:16ch;
  text-shadow:0 4px 24px rgba(0,0,0,0.35);
}
.phrd-about .hero-inner h1 em{ font-style:italic; color:var(--gold); font-weight:500; }

.phrd-about .readout{
  margin-top:44px;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid var(--line-on-teal);
}
.phrd-about .readout div{
  flex:1 1 140px;
  padding:18px 22px 0 0;
  border-right:1px solid var(--line-on-teal);
}
.phrd-about .readout div:last-child{ border-right:none; }
.phrd-about .readout dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-teal-faint); margin-bottom:7px;
}
.phrd-about .readout dd{ font-size:14px; font-weight:500; color:var(--on-teal); }

@media (max-width:900px){
  .phrd-about .hero{ min-height:520px; }
  .phrd-about .hero-inner{ padding:70px 28px; }
  .phrd-about .readout{ flex-wrap:wrap; }
  .phrd-about .readout div{ flex:1 1 45%; border-right:none; border-bottom:1px solid var(--line-on-teal); padding-bottom:14px; margin-bottom:4px; }
}

/* ============ WHO WE ARE — large statement section ============ */
.phrd-about .who{
  background:var(--paper);
  position:relative;
  padding:150px 0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.phrd-about .who .contours{ opacity:0.3; }
.phrd-about .who-inner{
  position:relative;
  max-width:1000px;
}
.phrd-about .who .eyebrow{ color:var(--teal); margin-bottom:28px; font-size:12px; }
.phrd-about .who h2{
  font-family:var(--display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(36px, 5.2vw, 68px);
  line-height:1.15;
  color:var(--ink);
  max-width:16ch;
  margin-bottom:40px;
  letter-spacing:-0.01em;
}
.phrd-about .who p{
  color:var(--ink-soft);
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.7;
  max-width:56ch;
  margin-bottom:22px;
}
.phrd-about .who p:last-of-type{ margin-bottom:0; }
.phrd-about .who .btn{
  margin-top:40px;
  padding:17px 30px;
  font-size:15px;
}

@media (max-width:900px){
  .phrd-about .who{ padding:90px 0; }
}

/* ============ WHO — split with supporting photo ============ */
.phrd-about .who-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:56px;
  align-items:center;
}
.phrd-about .who-photo .pic{
  position:relative;
  width:100%;
  background:var(--teal-deep-2);
  box-shadow:0 26px 60px -22px rgba(8,46,42,0.35);
  line-height:0;
}
.phrd-about .who-photo img{
  display:block;
  width:100%; height:auto;
  object-fit:contain;
  filter:saturate(0.92) contrast(1.02);
}
.phrd-about .who-photo .corner-tag{
  position:absolute; top:0; left:0;
  background:var(--teal-deep);
  color:var(--on-teal);
  font-family:var(--mono);
  font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  padding:9px 16px;
}

@media (max-width:900px){
  .phrd-about .who-grid{ grid-template-columns:1fr; gap:36px; }
  .phrd-about .who-photo{ order:-1; }
}

/* ============ WHAT WE DO — signal list ============ */
.phrd-about .signals{ background:var(--paper); padding:78px 0; position:relative; }
.phrd-about .signals-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.phrd-about .signals-head .eyebrow{ color:var(--teal); margin-bottom:12px; }
.phrd-about .signals-head h2{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.6vw,32px); color:var(--ink); }
.phrd-about .signals-head p{ color:var(--ink-soft); font-size:14.5px; max-width:36ch; }

.phrd-about .signals-photo{
  position:relative;
  width:100%;
  margin-bottom:44px;
  background:var(--teal-deep-2);
  box-shadow:0 22px 50px -24px rgba(8,46,42,0.4);
  line-height:0;
}
.phrd-about .signals-photo img{
  display:block;
  width:100%; height:auto;
  object-fit:contain;
  filter:saturate(0.92) contrast(1.02);
}
.phrd-about .signals-photo .corner-tag{
  position:absolute; bottom:0; right:0;
  background:var(--teal-deep);
  color:var(--on-teal);
  font-family:var(--mono);
  font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  padding:9px 16px;
}

.phrd-about .signal-list{ border-top:1px solid var(--line); }
.phrd-about .signal-row{
  position:relative;
  display:grid;
  grid-template-columns:26px 1fr 1.55fr;
  gap:26px;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  transition:background .15s ease;
}
.phrd-about .signal-row:hover{ background:rgba(24,36,32,0.035); }
.phrd-about .signal-row .tick{
  width:9px; height:9px;
  border:1.5px solid var(--teal);
  transform:rotate(45deg);
  margin-top:6px;
}
.phrd-about .signal-row h4{
  font-family:var(--display); font-weight:500; font-size:17px; color:var(--ink);
}
.phrd-about .signal-row p{ color:var(--ink-soft); font-size:14px; }

@media (max-width:900px){
  .phrd-about .signal-row{ grid-template-columns:16px 1fr; }
  .phrd-about .signal-row p{ grid-column:2 / -1; }
}

/* ============ REACH — mid-page photo band ============ */
.phrd-about .reach{
  background:var(--teal-light);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:78px 0;
}
.phrd-about .reach-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:56px;
  align-items:center;
}
.phrd-about .reach-copy .eyebrow{ color:var(--teal); margin-bottom:20px; }
.phrd-about .reach-copy h3{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(21px, 2.2vw, 27px);
  line-height:1.32;
  color:var(--ink);
  margin-bottom:16px;
  max-width:24ch;
}
.phrd-about .reach-copy p{
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.7;
  max-width:42ch;
}
.phrd-about .reach-photo .pic{
  position:relative;
  width:100%;
  background:var(--teal-deep-2);
  box-shadow:0 24px 56px -22px rgba(8,46,42,0.35);
  line-height:0;
}
.phrd-about .reach-photo img{
  display:block;
  width:100%; height:auto;
  object-fit:contain;
  filter:saturate(0.92) contrast(1.02);
}
.phrd-about .reach-photo .corner-tag{
  position:absolute; top:0; left:0;
  background:var(--teal-deep);
  color:var(--on-teal);
  font-family:var(--mono);
  font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  padding:9px 16px;
}

@media (max-width:900px){
  .phrd-about .reach{ padding:56px 0; }
  .phrd-about .reach-grid{ grid-template-columns:1fr; gap:32px; }
  .phrd-about .reach-copy h3, .phrd-about .reach-copy p{ max-width:none; }
}

/* ============ FOCUS AREAS — catalog ============ */
.phrd-about .catalog{ background:var(--paper-2); padding:78px 0 90px; }
.phrd-about .catalog-head{ margin-bottom:40px; max-width:60ch; }
.phrd-about .catalog-head .eyebrow{ color:var(--crimson); margin-bottom:12px; }
.phrd-about .catalog-head h2{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.6vw,32px); color:var(--ink); margin-bottom:12px; }
.phrd-about .catalog-head p{ color:var(--ink-soft); font-size:14.5px; }

.phrd-about .catalog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.phrd-about .catalog-item{
  background:var(--paper);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:background .18s ease;
  position:relative;
}
.phrd-about .catalog-item::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.phrd-about .catalog-item:hover{ background:var(--teal-light); }
.phrd-about .catalog-item:hover::after{ transform:scaleX(1); }
.phrd-about .catalog-item .row1{ display:flex; justify-content:space-between; align-items:flex-start; }
.phrd-about .catalog-item .code{
  font-family:var(--mono); font-size:11px; font-weight:600;
  color:var(--teal); letter-spacing:.05em;
}
.phrd-about .catalog-item .icon{
  width:34px; height:34px;
  background:var(--paper-2); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  color:var(--teal); flex-shrink:0;
}
.phrd-about .catalog-item .icon svg{ width:18px; height:18px; }
.phrd-about .catalog-item h4{
  font-family:var(--display); font-weight:500; font-size:16.5px; color:var(--ink);
}
.phrd-about .catalog-item p{ color:var(--ink-soft); font-size:13.5px; }

.phrd-about .catalog-item.photo{
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.phrd-about .catalog-item.photo .pic{
  width:100%;
  line-height:0;
  background:var(--paper-2);
}
.phrd-about .catalog-item.photo img{
  display:block;
  width:100%; height:auto;
  object-fit:contain;
  filter:saturate(0.9) contrast(1.03);
}
.phrd-about .catalog-item.photo .caption{
  padding:20px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.phrd-about .catalog-item.photo .caption .code{ color:var(--crimson); }
.phrd-about .catalog-item.photo:hover{ background:var(--teal-light); }

@media (max-width:900px){ .phrd-about .catalog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .phrd-about .catalog-grid{ grid-template-columns:1fr; } }

/* ============ FOOTER STRIP ============ */
.phrd-about .strip{
  background:var(--teal-deep);
  color:var(--on-teal);
  padding:30px 0;
}
.phrd-about .strip .wrap{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.phrd-about .strip .eyebrow{ color:var(--gold); }
.phrd-about .strip a{ font-size:13.5px; font-weight:600; border-bottom:1px solid var(--on-teal); padding-bottom:1px; }

.phrd-about .btn{
  display:inline-flex; align-items:center; gap:9px;
  width:fit-content;
  padding:13px 22px; font-weight:600; font-size:13.5px;
  border-radius:1px; border:1px solid var(--teal);
  background:transparent; color:var(--teal);
  transition:background .2s ease, color .2s ease;
  font-family:var(--body);
}
.phrd-about .btn:hover{ background:var(--teal); color:var(--paper); }
.phrd-about .btn::after{ content:"→"; transition:transform .2s ease; }
.phrd-about .btn:hover::after{ transform:translateX(3px); }