/* SEIDON GLASS — About, Contact, and Portfolio pages */
:root { --page-ink:#182736; --page-blue:#1b75bc; --page-gold:#c8a35d; }

.editorial-hero { position:relative; min-height:78svh; display:flex; align-items:flex-end; overflow:hidden; background:#142638; color:#fff; }
.editorial-hero__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.editorial-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,25,39,.86),rgba(16,40,61,.52) 52%,rgba(11,22,32,.24)),linear-gradient(0deg,rgba(9,22,34,.62),transparent 58%); }
.editorial-hero__content { position:relative; z-index:2; padding:clamp(150px,18vw,230px) 0 clamp(70px,9vw,120px); max-width:820px; }
.editorial-hero h1 { font-size:clamp(3rem,7vw,6.6rem); line-height:.94; letter-spacing:-.055em; margin:12px 0 24px; }
.editorial-hero p { max-width:650px; color:rgba(255,255,255,.78); font-size:clamp(1rem,1.6vw,1.25rem); }
.page-kicker { color:#91cef2; text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:700; }
/* =========================================================
   ABOUT — ARCHITECTURAL INTRODUCTION
   Distinct from the photographic homepage hero
   ========================================================= */

.about-hero {
  position: relative;
  overflow: hidden;

  padding:
    clamp(155px, 15vw, 220px)
    0
    clamp(78px, 9vw, 118px);

  color: #ffffff;

  background:
    radial-gradient(
      circle at 82% 26%,
      rgba(69, 160, 216, 0.2),
      transparent 32%
    ),
    linear-gradient(
      132deg,
      #122638,
      #1d3a5f
    );
}

/* Abstract architectural glass panes */
.about-hero::before,
.about-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;

  border: 1px solid rgba(159, 215, 245, 0.18);

  background:
    linear-gradient(
      135deg,
      rgba(217, 240, 252, 0.08),
      rgba(71, 151, 200, 0.025)
    );

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transform: skewX(-12deg);
}

.about-hero::before {
  width: 38vw;
  height: 74%;

  top: 14%;
  right: 9vw;

  border-radius: 10px 10px 70px 10px;
}

.about-hero::after {
  width: 23vw;
  height: 54%;

  right: -4vw;
  bottom: -12%;

  border-radius: 60px 10px 10px 10px;
}

.about-hero__grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, 0.65fr);

  gap: clamp(50px, 9vw, 130px);
  align-items: end;
}

.about-hero h1 {
  max-width: 760px;

  margin: 14px 0 26px;

  font-size: clamp(2.8rem, 5vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.048em;
}

.about-hero__intro {
  max-width: 640px;

  color: rgba(255, 255, 255, 0.7);

  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.7;
}

.about-signature {
  padding: 26px 0 8px 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.about-signature span {
  display: block;
  margin-bottom: 12px;

  color: #8ecdf0;

  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-signature strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.15rem;
}

.about-signature p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.92rem;
}

.story-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(48px,8vw,110px); align-items:center; }
.story-image { min-height:620px; border-radius:14px 14px 70px 14px; overflow:hidden; background:#e8edf1; }
.story-image img { width:100%; height:100%; min-height:620px; object-fit:cover; }
.story-copy h2 { font-size:clamp(2.3rem,4.7vw,4.8rem); letter-spacing:-.045em; margin:12px 0 28px; }
.story-copy p { color:#65707a; margin-bottom:18px; }

.principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d8e0e5; }
.principle { padding:34px clamp(18px,3vw,42px) 12px 0; }
.principle + .principle { padding-left:clamp(18px,3vw,42px); border-left:1px solid #d8e0e5; }
.principle__number { color:var(--page-gold); font-size:.75rem; font-weight:800; letter-spacing:.15em; }
.principle h3 { margin:18px 0 10px; font-size:1.35rem; }
.principle p { color:#6e7882; font-size:.95rem; }

.craft-feature { position:relative; min-height:720px; display:flex; align-items:flex-end; overflow:hidden; background:#102235; color:#fff; }
.craft-feature > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.craft-feature::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,18,29,.78),rgba(6,18,29,.1) 72%); }
.craft-glass { position:relative; z-index:2; width:min(620px,calc(100% - 40px)); margin:0 0 6vw 6vw; padding:clamp(28px,4vw,52px); border:1px solid rgba(224,244,255,.25); border-radius:13px 13px 46px 13px; background:linear-gradient(112deg,rgba(224,242,252,.14),rgba(126,193,229,.11)); backdrop-filter:blur(28px) saturate(150%); box-shadow:0 20px 58px rgba(3,18,30,.28),inset 0 1px rgba(255,255,255,.32); }
.craft-glass h2 { margin:10px 0 16px; font-size:clamp(2.1rem,4vw,4rem); }
.craft-glass p { color:rgba(255,255,255,.78); }

.company-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#dae2e7; border:1px solid #dae2e7; }
.company-stat { background:#fff; padding:36px 24px; }
.company-stat strong { display:block; font-size:clamp(2rem,4vw,4rem); line-height:1; color:var(--page-ink); }
.company-stat span { display:block; margin-top:10px; color:#78828b; font-size:.75rem; text-transform:uppercase; letter-spacing:.13em; }

.contact-hero { min-height:100svh; padding:clamp(145px,14vw,200px) 0 90px; background:radial-gradient(circle at 80% 20%,rgba(47,139,200,.24),transparent 36%),linear-gradient(135deg,#132536,#1d3a5f); color:#fff; }
.contact-layout { display:grid; grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr); gap:clamp(48px,8vw,120px); align-items:start; }
.contact-intro { position:sticky; top:130px; }
.contact-intro h1 { font-size:clamp(3.2rem,6.5vw,6.4rem); line-height:.93; letter-spacing:-.055em; margin:14px 0 26px; max-width: 620px; font-size: clamp(3rem, 5.5vw, 5.6rem);}
.contact-intro > p { color:rgba(255,255,255,.7); font-size:1.1rem; }
.contact-direct { display:grid; gap:14px; margin-top:38px; }
.contact-direct a { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.82); }
.contact-direct span { color:#8bc9ed; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }

.estimate-glass { padding:clamp(28px,4vw,54px); border:1px solid rgba(225,244,255,.24); border-radius:14px 14px 64px 14px; background:linear-gradient(120deg,rgba(224,242,252,.16),rgba(126,193,229,.10)); backdrop-filter:blur(28px) saturate(150%); box-shadow:0 28px 80px rgba(2,14,24,.26),inset 0 1px rgba(255,255,255,.3); }
.estimate-glass h2 { font-size:clamp(1.8rem,3vw,3rem); margin-bottom:8px; }
.estimate-glass > p { color:rgba(255,255,255,.64); margin-bottom:28px; }
.estimate-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.estimate-field { display:flex; flex-direction:column; gap:7px; }
.estimate-field--wide { grid-column:1/-1; }
.estimate-field label { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.68); }
.estimate-field input,.estimate-field select,.estimate-field textarea { width:100%; border:1px solid rgba(255,255,255,.18); border-radius:9px; padding:14px 15px; color:#fff; background:rgba(8,27,43,.24); font:inherit; }
.estimate-field select option { color:#1e2d38; }
.estimate-field textarea { min-height:130px; resize:vertical; }
.estimate-field input:focus,.estimate-field select:focus,.estimate-field textarea:focus { outline:none; border-color:#78c3ee; box-shadow:0 0 0 3px rgba(67,161,216,.15); }
.estimate-submit { width:100%; margin-top:22px; min-height:54px; }
.expectations { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.expectation { counter-increment:step; border-top:1px solid #cfd9df; padding-top:24px; }
.expectation::before { content:"0" counter(step); color:var(--page-gold); font-weight:800; letter-spacing:.12em; }
.expectation h3 { margin:14px 0 8px; font-size:1rem; }
.expectation p { color:#737d86; font-size:.9rem; }

.portfolio-hero { padding:clamp(150px,16vw,220px) 0 72px; background:linear-gradient(135deg,#14283a,#1d3a5f); color:#fff; }
.portfolio-hero__grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:end; gap:60px; }
.portfolio-hero h1 { font-size:clamp(3.3rem,7vw,7rem); line-height:.9; letter-spacing:-.06em; }
.portfolio-hero p { color:rgba(255,255,255,.68); font-size:1.08rem; }
.portfolio-shell { padding:42px 0 100px; background:#f4f6f7; }
.filter-rail {
  position: relative;
  top: auto;
  z-index: 50;
  isolation: isolate;
}
.filter-rail::-webkit-scrollbar { display:none; }
.projects-grid,
.project-card {
  position: relative;
  z-index: 1;
}
.projects-filter-section {
  position: relative;
  z-index: 20;
}
.portfolio-filter { border:0; border-radius:9px; padding:11px 17px; color:#53636f; background:transparent; font:600 .78rem/1 Inter,sans-serif; letter-spacing:.03em; white-space:nowrap; cursor:pointer; transition:color .2s,background .2s,transform .2s; }
.portfolio-filter:hover { color:#12283a; transform:translateY(-1px); }
.portfolio-filter[aria-pressed="true"] { color:#fff; background:linear-gradient(135deg,#2384c6,#1b75bc); box-shadow:0 7px 18px rgba(27,117,188,.22),inset 0 1px rgba(255,255,255,.28); }
.portfolio-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-flow:dense; gap:18px; }
.project-card { grid-column:span 4; min-height:390px; position:relative; overflow:hidden; border-radius:12px 12px 38px 12px; background:#dfe5e8; transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1); }
.project-card--wide { grid-column:span 8; }
.project-card--tall { min-height:600px; }
.project-card[hidden] { display:none; }
.project-card img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s; }
.project-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,18,29,.84),transparent 58%); opacity:.82; transition:opacity .4s; }
.project-card:hover img { transform:scale(1.035); filter:saturate(1.05); }
.project-card__meta { position:absolute; z-index:2; inset:auto 24px 22px; color:#fff; }
.project-card__meta span { display:block; color:#9dd4f3; font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:7px; }
.project-card__meta h2 { font-size:clamp(1.25rem,2vw,2rem); }
.portfolio-cta { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:70px; padding-top:38px; border-top:1px solid #d2dade; }

@media(max-width:900px){
  .about-hero__grid {
  grid-template-columns: 1fr;
}
  .story-grid,.contact-layout,.portfolio-hero__grid { grid-template-columns:1fr; }
  .story-image,.story-image img { min-height:480px; }
  .principles,.company-stats,.expectations { grid-template-columns:1fr 1fr; }
  .contact-intro { position:static; }
  .project-card,.project-card--wide { grid-column:span 6; }
}
@media(max-width:700px){
  .about-hero {
  padding: 138px 0 74px;
}

.about-hero::before {
  width: 72vw;
  right: -24vw;
  opacity: 0.7;
}

.about-hero::after {
  display: none;
}

.about-hero h1 {
  max-width: 520px;

  font-size: clamp(2.65rem, 12vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.about-hero__intro {
  font-size: 0.98rem;
  line-height: 1.65;
}

.about-signature {
  padding: 22px 0 0;

  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 0;
}

  .contact-intro h1 {
    max-width: 500px;
    font-size: clamp(2.8rem, 12vw, 4rem);
  }

  .contact-hero {
    padding-top: 135px;
  }

  .estimate-glass {
    padding: 26px 20px;
    border-radius: 12px 12px 34px 12px;
  }
  .editorial-hero { min-height:680px; }
  .editorial-hero__content { padding-top:140px; }

  /* =========================================================
   CENTERED MOBILE FOOTER
   ========================================================= */

footer .footer-top {
  grid-template-columns: 1fr;

  justify-items: center;
  gap: 38px;

  text-align: center;
}

footer .footer-brand {
  max-width: 420px;

  padding-right: 0;

  align-items: center;
  text-align: center;
}

footer .footer-logo {
  margin-inline: auto;
}

footer .footer-col {
  width: 100%;
  text-align: center;
}

footer .footer-col ul {
  align-items: center;
}

footer .footer-nap {
  text-align: center;
  line-height: 1.8;
}

footer .footer-bottom {
  align-items: center;
  justify-content: center;

  text-align: center;
}
footer .footer-logo-image {
  height: 82px;
}
  .story-image,.story-image img { min-height:400px; }
  .principles,.company-stats,.expectations,.estimate-form-grid { grid-template-columns:1fr; }
  .principle + .principle { padding-left:0; border-left:0; }
  .craft-feature { min-height:620px; }
  .craft-glass { margin:20px; }
  .contact-layout { gap:38px; }
  .estimate-field--wide { grid-column:auto; }
  .portfolio-hero { padding-top:128px; }
  .portfolio-grid { gap:12px; }
  .project-card,.project-card--wide { grid-column:1/-1; min-height:420px; }
  .project-card--tall { min-height:520px; }
  .portfolio-cta { align-items:flex-start; flex-direction:column; }
}