:root {
  --paper:#0a1012;
  --ink:#edf4ef;
  --muted:#aebcb5;
  --mint:#69e9ae;
  --line:#2a3933;
  --surface:#111c1e;
  --space:clamp(1.25rem,4.4vw,5rem);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  color-scheme:dark;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}

body {
  margin:0
}

a {
  color:inherit;
  text-underline-offset:.25em
}

button,input,select,textarea {
  font:inherit
}

a,button,summary {
  touch-action:manipulation
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #69e9ae;
  outline-offset:5px
}

img {
  display:block;
  max-width:100%;
  height:auto
}

p {
  font-size:clamp(1rem,1.3vw,1.18rem);
  line-height:1.6;
  max-width:64ch;
  margin:0 0 1.25rem
}

h1,h2,h3 {
  font-weight:600;
  letter-spacing:-.05em;
  text-wrap:balance;
  margin:0
}

h1 {
  font-size:clamp(3.4rem,7.2vw,7.3rem);
  line-height:1.02
}

h2 {
  font-size:clamp(2.5rem,4.6vw,4.8rem);
  line-height:1.08
}

h3 {
  font-size:clamp(1.5rem,2.3vw,2.4rem);
  line-height:1.14;
  margin-bottom:1rem;
  letter-spacing:-.035em
}

main {
  max-width:1920px;
  margin:auto
}

.skip-link {
  position:fixed;
  top:-100px;
  left:1rem;
  z-index:10;
  background:var(--mint);
  color:#10251a;
  padding:1rem
}

.skip-link:focus {
  top:1rem
}

.site-header {
  --paper:#f4f3ec;
  --ink:#18251d;
  --line:#ccd6ce;
  --muted:#506354;
  color:var(--ink);
  background:var(--paper);
  padding:1.3rem var(--space);
  max-width:none;
  margin:auto;
  display:flex;
  align-items:center;
  gap:3rem;
  position:relative;
  z-index:3
}

.brand {
  width:165px;
  display:block;
  flex-shrink:0;
  padding:0
}

.brand img {
  width:100%;
  height:auto
}

.desktop-nav {
  display:flex;
  gap:2.5rem;
  margin-left:auto
}

.desktop-nav a,.header-actions a,.site-footer a {
  text-decoration:none;
  font-size:.95rem
}

.desktop-nav a {
  padding:.4rem 0
}

.desktop-nav a:hover,.desktop-nav a[aria-current],.language:hover {
  box-shadow:0 2px var(--ink)
}

.header-actions {
  display:flex;
  align-items:center;
  gap:2rem
}

.header-contact {
  display:inline-flex;
  align-items:center;
  gap:1.2rem;
  padding:.7rem .8rem .7rem 1.1rem;
  border:1px solid #4b6858;
  border-radius:999px;
  line-height:1.3;
  transition:background .24s,color .24s,border-color .24s
}

.header-contact:hover {
  background:var(--mint);
  border-color:var(--mint);
  color:#10251a
}

.header-contact span {
  display:grid;
  place-items:center;
  width:1.65rem;
  height:1.65rem;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:1rem
}

.mobile-menu {
  display:none
}

.hero {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  grid-template-rows:1fr auto;
  gap:2rem 4%;
  align-items:center;
  min-height:660px;
  padding:3.5rem var(--space) 0;
  background:radial-gradient(ellipse at 65% 35%,#18392b88,transparent 65%),#0a1012;
  color:var(--ink)
}

.hero-copy {
  position:relative;
  z-index:2;
  padding:1rem 0 3rem;
  max-width:760px;
  min-width:0
}

.hero h1 {
  max-width:13ch;
  margin-bottom:1.8rem;
  font-size:clamp(3.5rem,6.5vw,7rem);
  font-weight:650;
  letter-spacing:-.06em;
  overflow-wrap:anywhere;
  hyphens:auto
}

.hero-image::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  border:1px solid #a9e0be26;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(0deg,#07120ec9,transparent 45%)
}

.hero-copy .eyebrow {
  color:var(--mint)
}

.hero :focus-visible,.work :focus-visible {
  outline-color:var(--mint)
}

.studio-strip {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(.75rem,2.5vw,2.5rem);
  margin:2rem var(--space) 0;
  padding:1.3rem 1rem;
  border:1px solid var(--line);
  border-radius:1rem;
  background:#12251b;
  color:var(--mint);
  font-size:clamp(1.1rem,2.5vw,2.4rem);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.1;
  text-align:center;
  overflow-wrap:anywhere
}

.eyebrow {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:1.8rem
}

.hero-copy>p:not(.eyebrow) {
  max-width:37ch;
  font-size:clamp(1.1rem,1.5vw,1.4rem);
  line-height:1.5;
  margin-bottom:2.5rem
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:3.75rem;
  padding:.65rem .7rem .65rem 1.45rem;
  background:var(--mint);
  color:#10251a;
  border:1px solid #9cf4c5;
  border-radius:999px;
  text-decoration:none;
  line-height:1.3;
  font-weight:650;
  font-size:.95rem;
  letter-spacing:-.015em;
  cursor:pointer;
  box-shadow:0 6px 28px #4ed68e14;
  transition:background .24s,border-color .24s,transform .24s cubic-bezier(.2,.7,.3,1)
}

.button span {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:2.35rem;
  height:2.35rem;
  background:#11342212;
  border:1px solid #245c3c55;
  border-radius:50%;
  font-size:1.3rem;
  line-height:1
}

.button:hover {
  background:#a2f3cd;
  border-color:#befbdc;
  transform:translateY(-2px)
}

.button:active {
  transform:translateY(1px)
}

.hero-image {
  position:relative;
  z-index:0;
  align-self:stretch;
  min-height:440px;
  max-height:680px;
  margin:0;
  padding:.65rem;
  border:1px solid #3d68584d;
  border-radius:1.8rem;
  background:#19382a55;
  box-shadow:0 24px 70px #0004;
  overflow:hidden
}

.hero-image img {
  height:100%;
  width:100%;
  border-radius:1.15rem;
  object-fit:cover;
  object-position:center
}

.photo-caption {
  display:block;
  position:absolute;
  z-index:2;
  bottom:1.8rem;
  left:1.8rem;
  right:1.8rem;
  max-width:35ch;
  font-size:.75rem;
  line-height:1.5;
  color:#f2f7f4;
  letter-spacing:.03em
}

.hero-bottom {
  position:relative;
  z-index:2;
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  border-top:1px solid var(--line);
  padding:1.6rem 0;
  font-size:.8rem;
  color:var(--muted)
}

.hero-bottom a {
  text-decoration:none
}

.section {
  margin:0 var(--space);
  padding:7rem 0;
  border-bottom:1px solid var(--line)
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:3rem;
  margin-bottom:4rem
}

.section-heading h2 {
  max-width:15ch
}

.section-heading .eyebrow {
  margin-top:.6rem
}

.format-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:2rem;
  align-items:start
}

.format-grid article:nth-child(2) {
  margin-top:3.5rem
}

.format-grid img {
  width:100%;
  height:clamp(280px,30vw,480px);
  border-radius:1rem;
  object-fit:cover;
  margin-bottom:1.8rem
}

.format-grid article:nth-child(2) img {
  height:clamp(260px,24vw,390px)
}

.format-grid h3 {
  font-size:clamp(2.1rem,3vw,3.4rem)
}

.arrow-link {
  display:inline-flex;
  justify-content:space-between;
  gap:2rem;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:.5rem;
  font-weight:500
}

.arrow-link:hover {
  color:#8ff4c4
}

.editorial-list {
  margin-left:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem
}

.editorial-list article {
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr);
  gap:1rem;
  padding:2rem;
  border:1px solid var(--line);
  border-radius:1rem;
  background:linear-gradient(145deg,#172624b3,#0e181b)
}

.editorial-list article:first-child {
  padding:2rem
}

.editorial-list p {
  margin-bottom:0
}

.index {
  font-family:monospace;
  font-size:.85rem;
  color:var(--muted)
}

.work {
  margin:0 var(--space);
  padding:clamp(2rem,5vw,5rem);
  background:radial-gradient(ellipse at 0 0,#1d4b3340,transparent 65%),#101a1b;
  color:var(--ink);
  border:1px solid #365548;
  border-radius:1.8rem;
  --line:#34463e;
  --muted:#bbc9c0
}

.work .eyebrow,.work .arrow-link {
  color:var(--mint)
}

.work .project-list a:is(:hover,:focus-visible) {
  background:#333e31
}

.work .arrow-link:hover {
  color:var(--ink)
}

.featured-project {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:3rem;
  align-items:center
}

.featured-project img {
  width:100%;
  aspect-ratio:1.35;
  object-fit:cover;
  border-radius:1rem
}

.featured-project h3 {
  font-size:clamp(2.8rem,4.6vw,5rem)
}

.course-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem;
  padding-top:6rem
}

.course-header h3 {
  max-width:15ch
}

.project-list {
  margin-top:2rem
}

.project-list a {
  display:grid;
  grid-template-columns:3rem 1fr 2rem;
  gap:1rem;
  align-items:center;
  border-top:1px solid var(--line);
  padding:1.6rem 0;
  text-decoration:none;
  font-size:clamp(1.2rem,2vw,1.8rem);
  transition:padding .2s
}

.project-list a:hover {
  padding-left:.7rem;
  background:#18291f
}

.project-list a span:nth-child(2) {
  min-width:0;
  overflow-wrap:anywhere;
  hyphens:auto
}

.quotes {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem 8%
}

.quotes>.eyebrow {
  grid-column:1/-1;
  margin-bottom:0
}

.quotes figure::before {
  content:"“" / "";
  position:absolute;
  top:.3rem;
  right:1.5rem;
  color:var(--mint);
  font-size:4rem;
  line-height:1
}

.quotes h2 {
  grid-column:1/-1;
  max-width:15ch;
  margin-bottom:1.5rem
}

.quotes figure {
  position:relative;
  margin:0;
  padding:2.2rem;
  border:1px solid var(--line);
  border-radius:1rem;
  background:var(--surface)
}

.quotes blockquote {
  font-size:clamp(1.3rem,1.85vw,1.9rem);
  line-height:1.45;
  letter-spacing:-.025em;
  margin:0 0 1.8rem
}

.quotes figcaption {
  font-size:.8rem;
  line-height:1.6;
  color:var(--muted)
}

.cta {
  position:relative;
  margin:1rem var(--space) 3rem;
  padding:4rem;
  background:radial-gradient(ellipse at 80% 20%,#2e744443,transparent 60%),#13251c;
  border:1px solid #3c624c;
  border-radius:1.8rem;
  color:var(--ink)
}

.cta h2 {
  font-size:clamp(3.4rem,7vw,7.5rem);
  letter-spacing:-.06em;
  max-width:12ch
}

.cta .button {
  position:absolute;
  right:4rem;
  bottom:4rem;
  background:var(--mint);
  border-color:#9cf4c5;
  color:#10251a
}

.cta .button span {
  border-color:#65745f
}

.cta .button:hover {
  background:#a2f3cd;
  border-color:#befbdc
}

.page-hero {
  position:relative;
  padding:5rem var(--space) 4rem;
  background:radial-gradient(ellipse at 85% 10%,#24583938,transparent 60%)
}

.page-hero h1 {
  max-width:15ch;
  margin-bottom:2.5rem
}

.page-hero>p:last-child {
  max-width:48ch;
  font-size:1.3rem
}

.wide-photo {
  margin:0 var(--space)
}

.wide-photo img {
  width:100%;
  height:clamp(300px,43vw,650px);
  border:1px solid #335044;
  border-radius:1.5rem;
  object-fit:cover
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:8%;
  padding-top:1rem
}

.contact-layout h2 {
  font-size:3rem;
  margin-bottom:2rem
}

.contact-layout>div p {
  max-width:35ch
}

.contact-layout h3 {
  margin-top:2rem;
  font-size:1.35rem;
  letter-spacing:-.025em
}

.preparation-list {
  padding-left:1.2rem;
  max-width:40ch;
  margin:0 0 1.5rem;
  line-height:1.6
}

.preparation-list li {
  margin-bottom:.6rem
}

.studio-address {
  margin-top:1.25rem
}

form {
  min-width:0
}

label {
  display:block;
  font-size:.9rem;
  font-weight:500;
  margin-bottom:1.5rem
}

input,select,textarea {
  display:block;
  border:1px solid #6c8d78;
  background:#0d1719;
  color:var(--ink);
  padding:1rem;
  width:100%;
  border-radius:.65rem;
  margin-top:.6rem
}

textarea {
  resize:vertical
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}

.consent {
  display:flex;
  gap:.9rem;
  font-weight:400;
  line-height:1.5
}

.consent input {
  width:1.2rem;
  height:1.2rem;
  flex-shrink:0;
  margin-top:.15rem;
  accent-color:#26815b
}

.honeypot {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}

#contact-status {
  margin-top:1.5rem
}

.legal-copy {
  max-width:80ch;
  padding-top:0
}

.legal-copy p {
  font-size:1rem;
  overflow-wrap:anywhere
}

.legal-copy h2 {
  font-size:2rem;
  margin:2rem 0
}

.site-footer {
  --paper:#f4f3ec;
  --ink:#18251d;
  --line:#ccd6ce;
  --muted:#506354;
  color:var(--ink);
  background:var(--paper);
  max-width:none;
  margin:auto;
  padding:3.5rem var(--space);
  display:grid;
  grid-template-columns:1.1fr 1fr auto;
  gap:2rem;
  align-items:start
}

.footer-brand {
  display:block;
  max-width:180px;
  padding:0
}

.footer-brand img {
  width:100%;
  height:auto
}

.site-footer p {
  font-size:.8rem;
  margin-bottom:.6rem
}

.site-footer nav {
  display:flex;
  flex-direction:column;
  gap:.8rem
}

.site-footer nav a:hover {
  text-decoration:underline
}

@media(max-width:1000px) {
  .desktop-nav {
    gap:1.5rem
  }

  .site-header {
    gap:1.5rem
  }

  .header-actions {
    gap:1rem
  }

  .brand {
    width:140px
  }

  .section {
    padding-top:5rem;
    padding-bottom:5rem
  }

  .featured-project {
    gap:2rem
  }

  .format-grid img {
    height:340px
  }

  .format-grid article:nth-child(2) img {
    height:290px
  }

  .cta .button {
    position:static;
    margin-top:2.5rem
  }

  .contact-layout {
    gap:5%
  }

}

@media(max-width:720px) {
  .site-header {
    padding-top:1.3rem;
    padding-bottom:1.3rem;
    gap:1rem
  }

  .brand {
    width:126px
  }

  .desktop-nav,.header-contact {
    display:none
  }

  .header-actions {
    margin-left:auto;
    gap:1.5rem
  }

  .mobile-menu {
    display:block
  }

  .mobile-menu summary {
    cursor:pointer;
    font-size:.85rem;
    padding:.8rem 0
  }

  .mobile-menu nav {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    padding:1rem var(--space) 2rem;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    gap:1.3rem
  }

  .hero-copy>p:not(.eyebrow) {
    max-width:33ch;
    font-size:1.08rem
  }

  .hero-bottom {
    align-items:flex-start;
    gap:1rem;
    font-size:.7rem;
    line-height:1.5;
    padding:1.4rem 0
  }

  .hero-bottom span {
    max-width:50%
  }

  .section {
    padding-top:4rem;
    padding-bottom:4rem
  }

  .section-heading {
    display:block;
    margin-bottom:2.5rem
  }

  .section-heading .eyebrow {
    margin-bottom:1.3rem
  }

  .section-heading h2 {
    max-width:16ch
  }

  .format-grid {
    grid-template-columns:1fr;
    gap:3rem
  }

  .format-grid article:nth-child(2) {
    padding:0;
    margin-left:12%
  }

  .format-grid img {
    height:370px
  }

  .format-grid article:nth-child(2) img {
    height:270px
  }

  .format-grid h3 {
    font-size:2rem
  }

  .editorial-list {
    margin-left:0
  }

  .editorial-list article {
    grid-template-columns:2rem 1fr;
    gap:.5rem;
    padding:1.7rem 0
  }

  .featured-project {
    grid-template-columns:1fr;
    gap:2rem
  }

  .featured-project h3 {
    font-size:2.6rem
  }

  .course-header {
    grid-template-columns:1fr;
    gap:1rem;
    padding-top:3.5rem
  }

  .course-header h3 {
    max-width:none
  }

  .project-list a {
    grid-template-columns:2rem 1fr 1rem;
    gap:.5rem;
    font-size:1.2rem
  }

  .quotes {
    grid-template-columns:minmax(0,1fr);
    gap:2rem
  }

  .quotes figure {
    margin-bottom:.5rem
  }

  .quotes h2 {
    margin-bottom:.5rem
  }

  .cta h2 {
    font-size:clamp(3rem,13vw,4.7rem)
  }

  .page-hero {
    padding-top:3.5rem;
    padding-bottom:2.5rem
  }

  .page-hero h1 {
    font-size:clamp(3.3rem,13.5vw,6rem);
    overflow-wrap:anywhere;
    hyphens:auto
  }

  .page-hero>p:last-child {
    font-size:1.1rem
  }

  .contact-layout {
    grid-template-columns:1fr;
    gap:3rem;
    padding-top:0
  }

  .contact-layout h2 {
    font-size:2.4rem
  }

  .form-row {
    grid-template-columns:1fr;
    gap:0
  }

  .site-footer {
    grid-template-columns:1fr 1fr;
    gap:2rem
  }

  .site-footer>div {
    grid-column:1/-1;
    grid-row:2
  }

  .site-footer nav {
    align-items:flex-end
  }


  .button {
    max-width:100%;
    gap:1rem
  }

  .legal-copy p {
    font-size:.95rem
  }

  .eyebrow {
    font-size:.65rem
  }

}

@media(prefers-reduced-motion:no-preference) {
  .format-grid article {
    transition:translate .35s cubic-bezier(.2,.7,.3,1)
  }

  .format-grid article:has(a:is(:hover,:focus-visible)) {
    translate:0 -6px
  }

  .button span,.arrow-link span[aria-hidden="true"] {
    transition:transform .24s cubic-bezier(.2,.7,.3,1)
  }

  .button:is(:hover,:focus-visible) span,.arrow-link:is(:hover,:focus-visible) span[aria-hidden="true"] {
    transform:translate(3px,-3px)
  }

  @supports(animation-timeline:view()) {
    .format-grid article,.featured-project {
      animation:studio-arrive linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 35%
    }
  }
}

@keyframes studio-arrive {
  from { transform:translateY(18px) }
  to { transform:translateY(0) }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }

  .button:hover,.button:active {
    transform:none
  }

}


/* Dark studio content with a continuous light brand header and footer. */
.hero h1 span { display:block; color:var(--mint) }
.hero .eyebrow { width:fit-content; padding:.55rem .85rem; border:1px solid #3b6b4c; border-radius:999px; background:#183023; font-size:.75rem }
.format-grid article { padding:1rem 1rem 1.7rem; border:1px solid var(--line); border-radius:1.4rem; background:var(--surface) }
.format-grid article>:not(img) { margin-left:.7rem; margin-right:.7rem }
.format-grid .arrow-link { font-size:.9rem; max-width:calc(100% - 1.4rem) }
.formats .section-heading { margin-bottom:3rem }
.contact-layout form { align-self:start; padding:2rem; border:1px solid var(--line); border-radius:1.2rem; background:var(--surface) }
.site-footer { border-top:1px solid var(--line) }
@media(max-width:1050px) {
 .featured-project { grid-template-columns:minmax(0,1fr) }
 .cta .button { position:static; margin-top:2rem }
}
@media(max-width:720px) {
 .hero { grid-template-columns:minmax(0,1fr); min-height:0; padding-top:2.5rem; gap:1.4rem }
 .hero-copy { padding:0 0 .5rem; max-width:none }
 .hero h1 { font-size:clamp(3rem,11.8vw,5rem); max-width:13ch; line-height:1.02 }
 .hero-image { min-height:0; height:auto; aspect-ratio:1.12; padding:.45rem; border-radius:1.25rem }
 .hero-image img { border-radius:.85rem }
 .photo-caption { left:1.3rem; right:1.3rem; bottom:1.3rem; top:auto; max-width:30ch; padding:0; font-size:.75rem }
 .hero-bottom { padding:1.2rem 0; font-size:.7rem; gap:1rem }
 .studio-strip { margin-top:1.2rem; padding:1rem .75rem; font-size:1.2rem }
 .section { padding-top:4rem; padding-bottom:4rem }
 .section-heading { gap:1.2rem; margin-bottom:2rem }
 .format-grid { gap:1.5rem }
 .format-grid article:nth-child(2) { margin-top:0; padding-top:1rem }
 .format-grid img,.format-grid article:nth-child(2) img { height:auto; aspect-ratio:1.15 }
 .editorial-list { grid-template-columns:minmax(0,1fr) }
 .editorial-list article,.editorial-list article:first-child { padding:1.5rem; grid-template-columns:1.6rem minmax(0,1fr); gap:.7rem }
 .editorial-list h3 { font-size:1.5rem }
 .work { margin:0 var(--space); padding:2rem 1.25rem; border-radius:1.25rem }
 .featured-project { gap:1.7rem }
 .featured-project h3 { font-size:2.25rem }
 .course-header { padding-top:3rem }
 .quotes figure { padding:2rem 1.5rem }
 .cta { margin:0 var(--space) 2rem; padding:2rem 1.5rem; border-radius:1.25rem }
 .cta h2 { font-size:clamp(2.8rem,12vw,4.5rem) }
 .contact-layout form { padding:1.4rem }
 .contact-layout h2 { font-size:2.4rem }
 .page-hero h1 { font-size:clamp(2.7rem,11.8vw,4.7rem); line-height:1.05 }
 .brand { width:143px }
}

.form-notice { padding:1rem; border:1px solid #486e57; border-radius:.7rem; color:var(--ink); background:#173024; font-size:.95rem }
.button:disabled { background:#1f3027; border-color:#476251; color:#bdc8c0; box-shadow:none; cursor:not-allowed; transform:none }

.site-header :focus-visible,.site-footer :focus-visible { outline-color:#237b55 }