/* ==========================================================================
   Abcon Construction site stylesheet
   Derived from Claude Design variants 2a (homepage) and 2b (project page).
   ========================================================================== */

:root {
  /* Brand */
  --teal:        #0B6E7F;
  --teal-deep:   #063E48;
  --teal-ink:    #062C34;
  --gold:        #E8BE48;
  --gold-deep:   #B98600;
  --cream:       #F7F3EA;
  --white:       #FFFFFF;

  /* Text */
  --ink:         #3F4B4D;
  --ink-muted:   #737F83;
  --on-dark:     #C3D2D5;
  --on-dark-dim: #93A8AC;

  /* Lines */
  --rule:        #DCE2E1;

  /* Fonts */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --gutter: clamp(20px, 4.4vw, 56px);
  --section-y: clamp(56px, 7vw, 104px);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: pretty;
}

p { margin: 0; }

/* ------------------------------------------------------------ utilities -- */

.wrap { padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.eyebrow--gold { color: var(--gold); letter-spacing: 4px; font-size: 12.5px; }

.lede { font-size: clamp(16px, 1.6vw, 17px); line-height: 1.78; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
}

.section-head__text { display: flex; flex-direction: column; gap: 14px; }

/* ----------------------------------------------------------------- type -- */

.h-hero  { font-size: clamp(40px, 6.4vw, 82px); line-height: 1.02; color: var(--white); }
.h-page  { font-size: clamp(36px, 5.6vw, 72px); line-height: 1.05; color: var(--white); }
.h-sec   { font-size: clamp(31px, 3.6vw, 46px); color: var(--teal); }
.h-sub   { font-size: clamp(26px, 2.8vw, 36px); color: var(--teal); }
.h-card  { font-family: var(--serif); font-size: clamp(21px, 2vw, 24px); font-weight: 600; color: var(--teal); line-height: 1.2; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 34px;
  text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--gold  { background: var(--gold); color: var(--teal-deep); }
.btn--gold:hover  { background: #f0cd6b; }

.btn--ghost {
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.65);
  background: rgba(6,44,52,.28);
  backdrop-filter: blur(2px);
}
.btn--ghost:hover { border-color: var(--white); background: rgba(6,44,52,.5); }

.btn--teal  { background: var(--teal); color: var(--white); padding: 20px 42px; letter-spacing: 1.6px; }
.btn--teal:hover  { background: #0d8296; }

/* underline link: the gold-ruled text link used throughout the design */
.link-rule {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 5px;
  white-space: nowrap;
  transition: color .18s ease;
}
.link-rule:hover { color: var(--gold-deep); }
.link-rule--light { color: var(--white); }
.link-rule--light:hover { color: var(--gold); }

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.site-header__logo img { height: clamp(36px, 4vw, 48px); width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 38px);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.nav a { color: var(--teal); text-decoration: none; }
.nav a:hover { color: var(--gold-deep); }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--gold); padding-bottom: 4px; }
.nav a.nav__cta,
.nav a.nav__cta[aria-current="page"] {
  color: var(--white);
  background: var(--teal);
  padding: 13px 26px;
  border-bottom: 0;
}
.nav a.nav__cta:hover { background: #0d8296; color: var(--white); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--teal);
}
.nav-toggle svg { display: block; }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: clamp(460px, 78vh, 760px);
  background: var(--teal-deep);
  overflow: hidden;
  display: flex;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after,
.hero::before { content: ""; position: absolute; inset: 0; }
.hero::before {
  background: linear-gradient(180deg, rgba(6,44,52,.50) 0%, rgba(6,44,52,.18) 26%, rgba(6,44,52,.62) 55%, rgba(6,44,52,.88) 78%, rgba(6,44,52,.96) 100%);
}
/* Anchored bottom-left so the copy block sits on a dark field while the
   subject of the photograph (right of frame) stays bright. */
.hero::after {
  background:
    radial-gradient(115% 95% at 0% 100%, rgba(6,44,52,.90) 0%, rgba(6,44,52,.60) 34%, rgba(6,44,52,.12) 66%, rgba(6,44,52,0) 100%),
    linear-gradient(90deg, rgba(6,44,52,.45) 0%, rgba(6,44,52,.18) 55%, rgba(6,44,52,0) 85%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 64px);
  padding: 96px var(--gutter) clamp(40px, 5vw, 62px);
  flex-wrap: wrap;
}

.hero__copy { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.hero__copy p { font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.65; color: rgba(255,255,255,.92); max-width: 60ch; }

/* Photography varies in brightness behind the hero copy. A soft shadow keeps
   the text legible on light-toned images without darkening the whole scrim. */
.hero__copy h1,
.hero__copy p,
.hero__copy .eyebrow { text-shadow: 0 1px 16px rgba(6,44,52,.55); }

.hero__actions { display: flex; flex-direction: column; gap: 14px; flex: none; padding-bottom: 6px; }

/* Homepage hero. Not an overlay: the photograph runs at its own frame,
   uncropped and unscrimmed, and the copy sits in a solid panel underneath it.
   Project heroes carry far less text and keep the overlay. */
.hero--stacked {
  display: block;
  min-height: 0;
}
.hero--stacked .hero__img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* On a phone the full 4:3 frame is short enough to run uncropped. Wider than
   that it is taller than the viewport and pushes the panel off the bottom of
   the screen, so cap the height and let the frame crop: the sky and the lawn
   give way, the building holds the centre. */
@media (min-width: 769px) {
  .hero--stacked .hero__img { max-height: min(74vh, 660px); }
}
.hero--stacked::before,
.hero--stacked::after { content: none; }

.hero--stacked .hero__inner {
  position: static;
  background: var(--teal-deep);
  padding: clamp(36px, 4.2vw, 60px) var(--gutter) clamp(40px, 4.6vw, 64px);
}
/* Solid ground behind the text now, so the legibility shadow is just muddying it. */
.hero--stacked .hero__copy h1,
.hero--stacked .hero__copy p,
.hero--stacked .hero__copy .eyebrow { text-shadow: none; }
.hero--stacked .hero__actions { padding-bottom: 0; }

@media (max-width: 1080px) {
  .hero--stacked .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }
  .hero--stacked .hero__copy { gap: 18px; }
}

/* project-page hero: single column, no right-hand gradient */
.hero--page { min-height: clamp(420px, 70vh, 700px); }
.hero--page::before {
  background: linear-gradient(180deg, rgba(6,44,52,.34) 0%, rgba(6,44,52,.08) 32%, rgba(6,44,52,.52) 64%, rgba(6,44,52,.93) 100%);
}
/* Title runs the width of the frame here, so the scrim is a flat base rather
   than the homepage's bottom-left anchored wash. */
.hero--page::after {
  background: linear-gradient(180deg, rgba(6,44,52,0) 40%, rgba(6,44,52,.42) 74%, rgba(6,44,52,.68) 100%);
}
.hero--page .hero__inner { flex-direction: column; align-items: stretch; gap: 14px; }

/* Compact hero for secondary pages. Less vertical room means the copy block
   sits proportionally higher, so the ramp has to start higher too. */
.hero--compact { min-height: clamp(320px, 46vh, 460px); }
.hero--compact::before {
  background: linear-gradient(180deg, rgba(6,44,52,.34) 0%, rgba(6,44,52,.10) 22%, rgba(6,44,52,.55) 58%, rgba(6,44,52,.90) 100%);
}
.hero--compact::after {
  background: linear-gradient(180deg, rgba(6,44,52,0) 20%, rgba(6,44,52,.45) 60%, rgba(6,44,52,.70) 100%);
}

/* -------------------------------------------------------------- section -- */

.section { padding: var(--section-y) var(--gutter); }
.section--cream { background: var(--cream); }
.section--deep  { background: var(--teal-deep); }
.section--deep .h-sec { color: var(--cream); }

/* about / who we are */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.about__copy { display: flex; flex-direction: column; gap: 24px; }
.about__copy .link-rule { margin-top: 6px; }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: clamp(150px, 17vw, 220px);
  gap: 16px;
}
.about__grid img { width: 100%; height: 100%; object-fit: cover; }
.about__grid img:first-child { grid-row: span 2; }

/* capabilities */
.caps { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.caps__head { border-bottom: 1px solid var(--rule); padding-bottom: 28px; }
.caps__head p { max-width: 44ch; font-size: 16px; line-height: 1.7; }

.caps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }

.cap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 34px 32px 38px;
}
.cap__num { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--gold); }
.cap h3 { font-size: clamp(25px, 2.4vw, 30px); color: var(--teal); }
.cap p { font-size: 15.5px; line-height: 1.7; }

/* projects on homepage */
.projects { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }

.project-feature {
  position: relative;
  display: block;
  height: clamp(320px, 42vw, 520px);
  overflow: hidden;
  text-decoration: none;
}
.project-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.project-feature:hover img { transform: scale(1.03); }
.project-feature__cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 40px);
  flex-wrap: wrap;
  padding: 120px clamp(20px, 3.4vw, 44px) clamp(26px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(6,44,52,0) 0%, rgba(6,44,52,.82) 100%);
}
.project-feature__cap > :first-child { display: flex; flex-direction: column; gap: 8px; }
.project-feature__kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--gold);
}
.project-feature__title {
  font-family: var(--serif); font-weight: 600; color: var(--white);
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1;
}

.project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 28px); }
.project-grid--3 { grid-template-columns: repeat(3, 1fr); }

.project-card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; }
.project-card__img { overflow: hidden; }
.project-card img {
  width: 100%;
  height: clamp(200px, 22vw, 290px);
  object-fit: cover;
  transition: transform .6s ease;
}
.project-card:hover img { transform: scale(1.04); }
.project-card__meta { display: flex; flex-direction: column; gap: 5px; }
.project-card__meta span:last-child { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }

/* how we work */
.steps { display: flex; flex-direction: column; gap: clamp(28px, 3.2vw, 40px); }
.steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 2.8vw, 36px); }
.step { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid rgba(232,190,72,.35); }
.step:first-child { border-top-color: var(--gold); }
.step b { font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); }
.step p { font-size: 15.5px; line-height: 1.7; color: var(--on-dark); }

/* CTA band */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
  padding: clamp(48px, 5.6vw, 72px) var(--gutter);
  background: var(--cream);
}
.cta-band__text { display: flex; flex-direction: column; gap: 12px; }
.cta-band h2 { font-size: clamp(30px, 3.4vw, 42px); color: var(--teal); max-width: 24ch; }
.cta-band p { font-size: 16.5px; }
.cta-band a { flex: none; }

/* --------------------------------------------------------------- footer -- */

.site-footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(44px, 5vw, 56px) var(--gutter) 36px;
  background: var(--teal-deep);
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* align-self keeps the column's stretch default from overriding width:auto */
.site-footer__brand img { align-self: flex-start; height: 52px; width: auto; }
.site-footer__wordmark {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--cream);
}
.site-footer__brand p { font-size: 14.5px; line-height: 1.7; color: var(--on-dark-dim); max-width: 34ch; }

.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col h2 {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold);
}
.site-footer__col a,
.site-footer__col span { font-size: 14.5px; color: var(--on-dark); text-decoration: none; line-height: 1.6; }
.site-footer__col a:hover { color: var(--gold); }
.site-footer__col .dim { color: var(--on-dark-dim); }

.site-footer__legal {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  color: var(--on-dark-dim);
}

/* ---------------------------------------------------- project page bits -- */

.project-intro { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }
.project-intro h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.18; color: var(--teal); max-width: 22ch; }
.project-intro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.project-intro__cols p { line-height: 1.8; }

/* fact table */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.facts div { display: flex; flex-direction: column; gap: 6px; padding: 26px 28px; background: var(--white); }
.facts dt, .facts b {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold-deep);
}
.facts span { font-size: 16px; color: var(--teal); font-weight: 500; line-height: 1.45; }

/* gallery */
.gallery { display: flex; flex-direction: column; gap: 20px; padding: 0 var(--gutter) var(--section-y); background: var(--white); }
.gallery__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Aspect ratios rather than fixed heights: the source photography is a mix of
   4:3 and 3:4 phone shots, and fixed heights crop the landscape ones to a
   letterbox strip on wide screens. */
.gallery img { width: 100%; height: auto; object-fit: cover; }
.gallery .g-tall { aspect-ratio: 16 / 10; }
.gallery .g-mid  { aspect-ratio: 1 / 1; }

@media (max-width: 620px) {
  .gallery .g-tall { aspect-ratio: 4 / 3; }
  .gallery .g-mid  { aspect-ratio: 4 / 3; }
}

/* placeholder note used on the copy-pending pages */
.placeholder-note {
  display: block;
  padding: 16px 20px;
  background: rgba(232,190,72,.16);
  border-left: 3px solid var(--gold);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}
.placeholder-note b { color: var(--gold-deep); letter-spacing: .4px; }
.placeholder-note code { font-size: .92em; background: rgba(6,44,52,.07); padding: 1px 5px; }

/* contact page */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.contact-list { display: flex; flex-direction: column; gap: 28px; }
.contact-list div { display: flex; flex-direction: column; gap: 6px; }
.contact-list dt, .contact-list b {
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--gold-deep);
}
.contact-list a, .contact-list span { font-size: 18px; color: var(--teal); text-decoration: none; line-height: 1.5; }
.contact-list a:hover { color: var(--gold-deep); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-deep); }
.form label.full { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 14px 16px; border: 1px solid var(--rule); background: var(--white);
  border-radius: 0; letter-spacing: normal; text-transform: none; font-weight: 400;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--teal); outline-offset: -2px; }
.form textarea { min-height: 150px; resize: vertical; }
.form button {
  grid-column: 1 / -1;
  justify-self: start;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
}
.form button:disabled { opacity: .6; cursor: wait; }
.form__status {
  grid-column: 1 / -1;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: rgba(11,110,127,.08);
  border-left: 3px solid var(--teal);
}
.form__status[data-state="error"] { background: rgba(232,190,72,.16); border-left-color: var(--gold-deep); }
.form__status[hidden] { display: none; }
/* honeypot field, kept out of sight and out of the tab order */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* projects index */
.index-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px); }
.index-card { display: flex; flex-direction: column; gap: 18px; text-decoration: none; }
.index-card__img { overflow: hidden; }
.index-card img { width: 100%; height: clamp(240px, 30vw, 400px); object-fit: cover; transition: transform .6s ease; }
.index-card:hover img { transform: scale(1.04); }
.index-card__meta { display: flex; flex-direction: column; gap: 8px; }
.index-card__meta p { font-size: 15.5px; line-height: 1.65; color: var(--ink); }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1080px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .steps__grid  { grid-template-columns: repeat(2, 1fr); }
  .facts        { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 30px rgba(6,44,52,.12);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav a[aria-current="page"] { border-bottom: 1px solid var(--rule); color: var(--gold-deep); }
  .nav a.nav__cta { margin-top: 14px; text-align: center; }

  .about { grid-template-columns: 1fr; }
  .about__grid { grid-auto-rows: clamp(140px, 26vw, 200px); }

  .caps__grid { grid-template-columns: 1fr; }
  .project-intro__cols { grid-template-columns: 1fr; gap: 22px; }
  .contact-grid { grid-template-columns: 1fr; }
  .index-grid { grid-template-columns: 1fr; }

  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }

  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero__actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .hero__actions .btn { flex: 1 1 200px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-grid--3 { grid-template-columns: 1fr; }
  .steps__grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .gallery__pair { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .cta-band a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .project-feature:hover img,
  .project-card:hover img,
  .index-card:hover img { transform: none; }
}