/* ==========================================================================
   Postcards from Sonder — rebuilt to match the reference layout
   Type:  Helvetica bold/regular (as the reference), Cormorant Garamond
          italic for the serif accent words, Kaushan Script for the script
          wordmark.
   ========================================================================== */

:root{
  --cream:      #FFE2B5;   /* butter-yellow accent + highlight boxes */
  --blue:       #C4E5D3;   /* pale blue section ground */
  --brown-band: #42332F;   /* statement band */
  --brown-deep: #3D2A19;   /* brands panel / body brown */
  --ink:        #2F2111;   /* headline brown */
  --white:      #FFFFFF;
  --rule:       rgba(47,33,17, .18);

  --sans:   "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:  "Cormorant Garamond", Georgia, serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;

  --maxw: 1180px;
  --gutter: 48px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--white);
  color: var(--brown-deep);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, video{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }

.wrap{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- media placeholders ------------------------------------------ */

.ph{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg,
      rgba(47,33,17,.04) 0 12px, rgba(47,33,17,.075) 12px 24px),
    #EFE5DC;
  border: 1px dashed rgba(47,33,17,.3);
  color: rgba(47,33,17,.55);
  text-align: center;
}
.ph__label{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.9;
  padding: 12px;
}
.ph__label b{ display:block; font-size: 11px; letter-spacing: .22em; color: var(--ink); }
.ph__label span{ display:block; font-weight: 400; font-size: 9px; opacity: .75; }
.ph--fill{ position: absolute; inset: 0; border: none; }
.ph--dark{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,226,181,.05) 0 14px, rgba(255,226,181,.09) 14px 28px),
    #5B4A3D;
  border-color: rgba(255,226,181,.35);
  color: rgba(255,226,181,.75);
}
.ph--dark .ph__label b{ color: var(--cream); }

/* ---------- serif accent + highlight ------------------------------------ */

.accent{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.hl{                                     /* cream highlight box behind word */
  background: var(--cream);
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

.site-header{
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 30;
  padding: 30px 0;
}
.site-header--solid{
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
  padding-inline: var(--gutter);
}
.nav a,
.nav .nav__more > button{
  font-family: var(--sans);
  font-weight: 700;                       /* bold, as the reference */
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  transition: color .2s ease;
}
/* pressed / hovered / current page -> brown */
.nav a:hover,
.nav a:active,
.nav a[aria-current="page"],
.nav .nav__more > button:hover,
.nav .nav__more > button:active{
  color: var(--brown-deep);
}
.site-header--solid .nav a,
.site-header--solid .nav .nav__more > button{ color: var(--brown-deep); }
.site-header--solid .nav a:hover,
.site-header--solid .nav a:active,
.site-header--solid .nav a[aria-current="page"]{
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.nav__more{ position: relative; }
.nav__more menu{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 10px 0 0;
  padding: 10px 0;
  min-width: 190px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--rule);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.nav__more:hover menu,
.nav__more:focus-within menu{ opacity: 1; visibility: visible; }
.nav__more menu a{
  display: block;
  padding: 9px 20px;
  color: var(--brown-deep);
  font-size: 11px;
}

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

.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #5B4A3D;
}
.hero__media{ position: absolute; inset: 0; }
.hero__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47,33,17,.30) 0%, rgba(47,33,17,.05) 40%, rgba(47,33,17,.22) 100%);
}
.hero__logo{
  position: relative;
  z-index: 10;
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.8rem, 7.5vw, 6.8rem);
  line-height: 1.15;
  color: var(--cream);
  text-align: center;
  padding-inline: 24px;
  text-shadow: 0 2px 26px rgba(47,33,17,.32);
}
.hero .ph--fill{ align-items: flex-end; justify-content: flex-start; }
.hero .ph--fill .ph__label{ text-align: left; padding: 0 0 48px 40px; }

/* ---------- statement band (dark brown, cream bold) ---------------------- */

.band-statement{
  background: var(--brown-band);
  padding: 150px 0 170px;
}
.statement{
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--cream);
  max-width: 880px;
}

/* ---------- about (pale blue, framed photo + display) -------------------- */

.about{
  background: var(--blue);
  padding: 130px 0 40px;
}
.about__grid{
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 90px;
  align-items: start;
}

/* framed photo with text overlays */
.polaroid{
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border: 3px solid var(--brown-band);
  border-radius: 14px;
  overflow: hidden;
}
.polaroid .ph{ position: absolute; inset: 0; border: none; }
.polaroid__caption{
  position: absolute;
  z-index: 5;
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.05;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(47,33,17,.35);
}
.polaroid__caption .accent{ color: var(--cream); font-weight: 600; }
.polaroid__caption--tl{ top: 28px; left: -34px; }
.polaroid__caption--br{ right: 20px; bottom: 90px; text-align: right; }

.about__display{
  margin: 0 0 30px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--brown-deep);
}
.about__display .accent{
  font-size: 1.08em;
  font-weight: 600;
}
.about__body{
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--brown-deep);
  max-width: 46ch;
}

/* wavy transition out of the blue section */
.wave{
  display: block;
  width: 100%;
  height: 90px;
  background: var(--blue);
}
.wave svg{ display: block; width: 100%; height: 100%; }

/* ---------- services (white, centered) ----------------------------------- */

.services{
  background: var(--white);
  padding: 110px 0 120px;
  text-align: center;
}
.services__title{
  margin: 0 0 22px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 3rem);
  letter-spacing: -.02em;
  color: #1E1B17;
}
.services__title .accent{ font-size: 1.1em; }
.services__intro{
  margin: 0 auto 64px;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.55;
  color: #322B20;
}
.cards{
  display: grid;
  grid-template-columns: repeat(2, 340px);
  justify-content: center;
  gap: 120px;
}
.card{ display: block; }
.card__media{
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 4px rgba(196,229,211,.85);
}
.card__media .ph{ position: absolute; inset: 0; border: none; }
.card__title{
  margin: 26px 0 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.card:hover .card__title{ text-decoration: underline; text-underline-offset: 5px; }

/* ---------- brands (brown panel + photo split) --------------------------- */

.brands{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}
.brands__body{
  background: var(--brown-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px min(8vw, 100px);
}
.brands__title{
  margin: 0 0 30px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
}
.brands__title .num{ color: var(--cream); }
.brands__text{
  margin: 0 0 34px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--blue);
  max-width: 42ch;
}
.brands__list{
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--blue);
  max-width: 44ch;
}
.brands__list .alt{ color: var(--cream); }
.brands__figure{ position: relative; }

/* ---------- testimonials (white, 3 cols + rules) ------------------------- */

.quotes-section{ background: var(--white); padding: 0; }
.quotes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.quote{
  padding: 90px 44px 110px;
  text-align: center;
}
.quote + .quote{ border-left: 1px solid rgba(0,0,0,.35); }
.quote__mark{
  display: block;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 110px;
  line-height: .4;
  height: 58px;
  color: var(--cream);
  user-select: none;
}
.quote__brand{
  margin: 44px 0 24px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.quote__text{
  margin: 0 auto;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.7;
  color: #322B20;
}

/* ---------- feed (pale blue, heading left + carousel right) --------------- */

.feed{
  background: var(--blue);
  padding: 110px 0;
  overflow: hidden;
}
.feed__grid{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: center;
}
.feed__title{
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.feed__strip{
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.feed__strip::-webkit-scrollbar{ height: 4px; }
.feed__strip::-webkit-scrollbar-thumb{ background: rgba(47,33,17,.25); }
.feed__item{
  flex: none;
  width: 224px;
  height: 316px;
  scroll-snap-align: start;
  border-radius: 4px;
  overflow: hidden;
}
.feed__item .ph{ width: 100%; height: 100%; border: none; }

/* ---------- footer (pale blue) ------------------------------------------- */

.site-footer{
  background: var(--blue);
  padding: 20px 0 70px;
}
.footer__grid{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer__logo{
  margin: 0;
  font-family: var(--script);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.2;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(47,33,17,.12);
}
.footer__links{
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.footer__links a{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--brown-deep);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.footer__links a:hover{ border-bottom-color: var(--brown-deep); }
.footer__legal{
  margin: 34px 0 0;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(61,42,25,.6);
}

/* ---------- inner pages --------------------------------------------------- */

.page-hero{ padding: 120px 0 60px; }
.page-hero__title{
  margin: 0 0 18px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 3rem);
  letter-spacing: -.02em;
  color: #1E1B17;
}
.page-hero__lede{
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  color: var(--brown-deep);
}
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 40px 0 100px;
}
.grid-3 figure{ margin: 0; }
.grid-3 .ph{ aspect-ratio: 4 / 5; border-radius: 10px; }
.grid-3 h3{
  margin: 16px 0 2px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.grid-3 p{ margin: 0; font-size: 12px; color: rgba(61,42,25,.6); }

.cta{
  background: var(--brown-band);
  text-align: center;
  padding: 110px 0;
}
.cta h2{
  margin: 0 0 28px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  color: var(--cream);
}
.btn{
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid var(--cream);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
  transition: background .3s ease, color .3s ease;
}
.btn:hover{ background: var(--cream); color: var(--brown-deep); }

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

@media (max-width: 1024px){
  :root{ --gutter: 32px; }
  .about__grid{ grid-template-columns: 340px 1fr; gap: 50px; }
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 50px; }
  .brands{ grid-template-columns: 1fr; }
  .brands__figure{ min-height: 420px; }
  .quotes{ grid-template-columns: 1fr; }
  .quote + .quote{ border-left: 0; border-top: 1px solid rgba(0,0,0,.35); }
  .feed__grid{ grid-template-columns: 1fr; gap: 40px; }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .nav{ gap: 20px; }
  .nav a, .nav .nav__more > button{ font-size: 11px; letter-spacing: .14em; }
  .band-statement{ padding: 90px 0; }
  .about{ padding: 80px 0 20px; }
  .about__grid{ grid-template-columns: 1fr; }
  .polaroid{ max-width: 360px; }
  .polaroid__caption--tl{ left: 16px; }
  .cards{ grid-template-columns: 1fr; justify-items: center; }
  .card{ width: min(340px, 100%); }
  .quote{ padding: 60px 32px 70px; }
  .grid-3{ grid-template-columns: 1fr; }
  .footer__grid{ flex-direction: column; align-items: flex-start; }
}

/* hero background video */
.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* single service card centered */
.cards--single{ grid-template-columns: 340px; }
@media (max-width: 720px){ .cards--single{ grid-template-columns: 1fr; } }

/* wave now drips the blue section into the brown band below it */
.wave{ background: var(--brown-band); }

/* tighter statement band for a single-line tagline */
.band-statement--tight{ padding: 100px 0 110px; }
.band-statement--tight .statement{ margin-inline: auto; text-align: center; max-width: none; }
@media (max-width: 720px){
  .band-statement--tight{ padding: 64px 0 70px; }
}

/* the two brown bands are now adjacent — read them as one section */
.band-statement + .band-statement--tight{ padding-top: 0; }

/* lighter scrim so the hero video reads sharper (wordmark keeps its shadow) */
.hero__scrim{
  background: linear-gradient(180deg,
    rgba(47,33,17,.22) 0%,
    rgba(47,33,17,.03) 40%,
    rgba(47,33,17,.17) 100%);
}

/* footer links stack vertically: Get in touch, then Instagram beneath it */
.footer__links{
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
@media (max-width: 720px){
  .footer__links{ align-items: flex-start; }
}

/* ---------- editorial gallery (hotel work) ------------------------------ */

.gallery{ padding: 10px 0 110px; }

/* full-bleed opener */
.gallery__bleed{ margin: 0 0 96px; }
.gallery__bleed img{
  width: 100%;
  height: clamp(300px, 50vw, 600px);
  object-fit: cover;
  display: block;
}

/* shared frame: holds the crop, clips the hover zoom */
.gallery__frame{
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-alt);
}
.gallery__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16,.68,.43,.99);
}
.gallery__frame--tall{ aspect-ratio: 4 / 5; }
.gallery__frame--wide{ aspect-ratio: 3 / 2; }

.gallery__item{ margin: 0; }
.gallery__item:hover .gallery__frame img{ transform: scale(1.045); }

/* offset pair — second one drops for editorial rhythm */
.gallery__pair{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  margin-bottom: 96px;
}
.gallery__item--drop{ margin-top: 88px; }

.gallery__item--feature{ margin-bottom: 96px; }

/* closer sits off-axis to the right */
.gallery__item--closer{ width: 76%; margin-left: auto; }

/* numbered captions */
.gallery__cap{
  display: block;
  margin-top: 18px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.gallery__cap span{
  display: inline-block;
  background: var(--brown-deep);
  color: var(--cream);
  padding: 3px 8px;
  margin-right: 12px;
  border-radius: 2px;
}
.gallery__cap--bleed{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (prefers-reduced-motion: reduce){
  .gallery__frame img{ transition: none; }
  .gallery__item:hover .gallery__frame img{ transform: none; }
}

@media (max-width: 1024px){
  .gallery__item--drop{ margin-top: 56px; }
  .gallery__pair{ gap: 32px; margin-bottom: 72px; }
  .gallery__item--feature{ margin-bottom: 72px; }
  .gallery__item--closer{ width: 88%; }
}

@media (max-width: 720px){
  .gallery{ padding-bottom: 70px; }
  .gallery__bleed{ margin-bottom: 56px; }
  .gallery__pair{ grid-template-columns: 1fr; gap: 48px; margin-bottom: 48px; }
  .gallery__item--drop{ margin-top: 0; }
  .gallery__item--feature{ margin-bottom: 48px; }
  .gallery__item--closer{ width: 100%; }
}

/* ---------- from overlooked to overbooked (pale blue + photo row) ------- */

.obb{
  background: var(--blue);
  padding: 100px 0 70px;
}
.obb__title{
  margin: 0 0 64px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.6vw, 3.5rem);
  line-height: 1.08;
  text-transform: uppercase;
  text-align: center;
  color: var(--brown-deep);
}
.obb__row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.obb__item{ margin: 0; overflow: hidden; }
.obb__item img{
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.16,.68,.43,.99);
}
.obb__item:hover img{ transform: scale(1.04); }

/* wave now drips the blue block into the white services section */
.wave{ background: var(--white); }

@media (prefers-reduced-motion: reduce){
  .obb__item img{ transition: none; }
  .obb__item:hover img{ transform: none; }
}
@media (max-width: 900px){
  .obb__row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .obb{ padding: 64px 0 48px; }
  .obb__title{ margin-bottom: 40px; }
  .obb__row{ gap: 10px; }
}

/* ---------- shared photo tile (obb row + catalogue rows) ---------------- */
.tile{ margin: 0; overflow: hidden; }
.tile img{
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.16,.68,.43,.99);
}
.tile:hover img{ transform: scale(1.04); }

/* ---------- catalogue of places ("the look") ---------------------------- */
.cat{ background: var(--white); padding: 86px 0 100px; }
.cat__intro{
  margin: 0 0 62px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(61,42,25, .58);
}
.cat__group{ margin-bottom: 82px; }
.cat__group:last-child{ margin-bottom: 0; }
.cat__label{
  margin: 0 0 26px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.cat__row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.cat__label--work{ margin-bottom: 34px; }

/* the own-work gallery now follows the catalogue */
.gallery{ padding-top: 86px; }

@media (prefers-reduced-motion: reduce){
  .tile img{ transition: none; }
  .tile:hover img{ transform: none; }
}
@media (max-width: 900px){
  .cat__row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .cat{ padding: 64px 0 70px; }
  .cat__group{ margin-bottom: 56px; }
  .cat__row{ gap: 10px; }
}

/* catalogue has no headers — rows sit on the same rhythm as the tile gaps */
.cat{ padding: 70px 0 90px; }
.cat__group{ margin-bottom: 16px; }
.cat__group:last-child{ margin-bottom: 0; }
@media (max-width: 520px){
  .cat{ padding: 56px 0 64px; }
  .cat__group{ margin-bottom: 10px; }
}

/* ---------- hotels page: pale blue the whole way, one unified grid ------ */
.page--blue{ background: var(--blue); }
.page--blue .site-header--solid{
  background: var(--blue);
  border-bottom: 1px solid rgba(61,42,25, .14);
}
.page--blue .page-hero{ background: var(--blue); }
.page--blue .obb{ padding: 80px 0 56px; }

.grid-all{
  background: var(--blue);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 0 0 90px;
}

@media (max-width: 900px){
  .grid-all{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .grid-all{ gap: 10px; padding-bottom: 64px; }
  .page--blue .obb{ padding: 56px 0 36px; }
}

/* 25 tiles = six full rows + one — flex lets the final partial row centre
   instead of stranding a lone tile on the left */
.grid-all{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.grid-all .tile{ flex: 0 0 calc((100% - 48px) / 4); }

@media (max-width: 900px){
  .grid-all .tile{ flex: 0 0 calc((100% - 16px) / 2); }
}
@media (max-width: 520px){
  .grid-all .tile{ flex: 0 0 calc((100% - 10px) / 2); }
}

/* ---------- hero still image (replaces the video; hero.mp4 kept in assets) */
.hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- decorative cursive initials in the wordmark ----------------- */
.script-init{
  font-family: "Great Vibes", "Yellowtail", cursive;
  font-size: 1.18em;
  padding-right: .015em;
}

/* ---------- filled reel + service-card slots ---------------------------- */
.feed__item img,
.card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feed__item{ overflow: hidden; border-radius: 4px; }

/* ======================================================================
   HERO — HD video with cinematic edge blur, holographic sheen, film grain
   ====================================================================== */

.hero__media{ overflow: hidden; }

.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  animation: heroBreathe 18s ease-in-out infinite;
}
@keyframes heroBreathe{
  0%, 100% { transform: scale(1.03); }
  50%      { transform: scale(1.055); }
}

/* blurred cinematic edges, fading inward */
.hero__edge{
  position: absolute;
  top: -2%;
  bottom: -2%;
  width: 18%;
  pointer-events: none;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.hero__edge--l{
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
          mask-image: linear-gradient(to right, #000000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
}
.hero__edge--r{
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
          mask-image: linear-gradient(to left, #000000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
}

/* liquid-glass holographic sheen down the sides */
.hero__holo{
  position: absolute;
  inset: -10%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .30;
  filter: blur(30px);
  background:
    linear-gradient(102deg,
      rgba(252,143,178,.55) 0%,
      rgba(139,246,196,.50) 15%,
      rgba(255,255,255,0)   32%,
      rgba(255,255,255,0)   68%,
      rgba(255,204,150,.50) 86%,
      rgba(153,252,230,.55) 100%);
  animation: holoDrift 11s ease-in-out infinite alternate;
}
@keyframes holoDrift{
  from{ transform: translateX(-2.5%) skewX(-1.2deg) scaleY(1);    opacity: .24; }
  to  { transform: translateX( 2.5%) skewX( 1.2deg) scaleY(1.06); opacity: .36; }
}

/* film grain + old-projector flicker */
.hero__grain{
  position: absolute;
  inset: -60%;
  pointer-events: none;
  opacity: .15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift .9s steps(5) infinite, projectorFlicker 6s ease-in-out infinite;
}
@keyframes grainShift{
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0,0); }
}
@keyframes projectorFlicker{
  0%, 100% { opacity: .15; }
  47%      { opacity: .13; }
  50%      { opacity: .21; }
  53%      { opacity: .14; }
}

/* vignette + warmth over the top */
.hero__scrim{
  background:
    radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(37,25,13,.50) 100%),
    linear-gradient(180deg, rgba(47,33,17,.24) 0%, rgba(47,33,17,.03) 42%, rgba(47,33,17,.20) 100%);
}

@media (prefers-reduced-motion: reduce){
  .hero__video, .hero__holo, .hero__grain{ animation: none; }
}

/* ---------- top nav: Helvetica Neue, tighter tracking ------------------ */
.nav a,
.nav .nav__more > button{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .04em;
  font-weight: 600;
}
/* keep the cream nav legible over bright video frames */
.site-header:not(.site-header--solid) .nav a{
  text-shadow: 0 1px 10px rgba(37,25,13,.55);
}

/* reel + card placeholders are now video */
.feed__item video,
.card__media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* nav: tighten the letters, but keep the gap between words intact
   (letter-spacing also squeezes the space character, so word-spacing
    puts that gap back) */
.nav a,
.nav .nav__more > button{
  letter-spacing: -0.015em;
  word-spacing: 0.38em;
}

/* founder portrait fills the framed polaroid */
.polaroid__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- warmer yellow wordmark ------------------------------------- */
:root{ --gold: #F2B46E; }
.hero__logo,
.footer__logo{ color: var(--gold); }

/* ---------- brands panel with no photo: run it full width -------------- */
.brands--solo{ grid-template-columns: 1fr; }
.brands--solo .brands__body{ padding: 90px min(10vw, 130px); }
.brands--solo .brands__text,
.brands--solo .brands__list{ max-width: 62ch; }

/* ---------- four testimonials ------------------------------------------ */
.quotes{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quote{ padding: 80px 32px 96px; }
@media (max-width: 1024px){
  .quotes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote + .quote{ border-left: 1px solid rgba(0,0,0,.35); }
  .quote:nth-child(odd){ border-left: 0; }
  .quote:nth-child(n+3){ border-top: 1px solid rgba(0,0,0,.35); }
}
@media (max-width: 620px){
  .quotes{ grid-template-columns: 1fr; }
  .quote + .quote{ border-left: 0; border-top: 1px solid rgba(0,0,0,.35); }
}

/* ---------- polaroid captions: keep them, stop them clipping ------------
   they used to hang outside the frame, which .polaroid's overflow:hidden
   cut off at narrow widths                                              */
.polaroid__caption{
  max-width: calc(100% - 40px);
  word-break: normal;
  overflow-wrap: break-word;
}
.polaroid__caption--tl{ top: 22px; left: 22px; }
.polaroid__caption--br{ right: 22px; bottom: 26px; }
@media (max-width: 720px){
  .polaroid__caption--tl{ top: 16px; left: 16px; }
  .polaroid__caption--br{ right: 16px; bottom: 18px; }
}

/* "sunday" and "business." on the founder photo use the wordmark script
   (Kaushan Script — same face as the rest of the wordmark), not the serif accent */
.polaroid__caption .accent{
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.28em;
  letter-spacing: .01em;
}

/* ======================================================================
   Footer: sunset orange, nav-style links, envelope icon
   ====================================================================== */
:root{ --orange: #D48947; }

.site-footer{
  background: var(--orange);
  padding: 70px 0 66px;
  border-top: 0;
}
.page--blue .site-footer{ background: var(--orange); }

.footer__links a{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.015em;
  word-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 0;
}
.footer__links a:hover{ color: var(--cream); border-bottom: 0; }
.footer__icon{
  width: 1.15em;
  height: 1.15em;
  flex: none;
  margin-top: -1px;
}

/* ---------- nav: never underline, even when pressed / current --------- */
.nav a,
.nav a:hover,
.nav a:active,
.nav a:focus,
.nav a[aria-current="page"],
.site-header--solid .nav a,
.site-header--solid .nav a:hover,
.site-header--solid .nav a:active,
.site-header--solid .nav a[aria-current="page"]{
  text-decoration: none;
}

/* ---------- testimonials: sunset orb glowing at the top of each ------- */
.quote{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.quote::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: -96px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%,
    rgba(250,202,109, .95) 0%,
    rgba(235,159,79, .60) 38%,
    rgba(212,137,71, .22) 62%,
    rgba(212,137,71, 0)   78%);
  filter: blur(10px);
  pointer-events: none;
}

/* ---------- testimonial cards: cream ground + layered sunset ----------- */
.quotes-section{ background: var(--white); }
.quote{ background: #FBEEE4; }

/* stack three glows so the sun reads with bands, not one flat blob:
   ::before = the wide outer haze, ::after = the hot core + a rim above it */
.quote::before{
  top: -120px;
  width: 340px;
  height: 260px;
  filter: blur(16px);
  background:
    radial-gradient(circle at 50% 62%,
      rgba(255,193,150, .55)  0%,
      rgba(242,183,101, .42) 30%,
      rgba(223,146,79, .26) 52%,
      rgba(201,113,78, .12) 70%,
      rgba(201,113,78, 0)   84%);
}
.quote::after{
  content: "";
  position: absolute;
  z-index: -1;
  top: -74px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 150px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(9px);
  background:
    radial-gradient(circle at 50% 64%,
      rgba(255,238,214, .95)  0%,
      rgba(255,184,128, .85) 22%,
      rgba(244,186,91, .62) 44%,
      rgba(228,144,71, .34) 64%,
      rgba(228,144,71, 0)   80%);
}

/* quote marks sit on the sunset glow — a small warm shadow lifts them off it */
.quote__mark{
  text-shadow:
    0 1px 1px rgba(117,69,31, .30),
    0 3px 7px rgba(117,69,31, .22);
}

/* ---------- footer: sunset fade from the section above ----------------
   Blue and orange are complements, so a straight two-stop blend passes
   through grey mud at the midpoint. This ramp is routed the way an actual
   sky goes — blue, periwinkle, mauve, dusty rose, apricot, orange — with
   stops bunched where banding would otherwise show.                      */
.site-footer{
  position: relative;
  padding-top: 175px;
  background: linear-gradient(180deg,
    #C4E5D3  0%,
    #C6E2D4  7%,
    #CADCD5 14%,
    #D2CCD5 21%,
    #D9C6C6 28%,
    #E1C5B7 35%,
    #E7C3A4 42%,
    #EABF8F 50%,
    #E7B479 59%,
    #E1A463 69%,
    #DB9652 79%,
    #D48947 89%,
    #D48947 100%);
}
/* a low sun sitting in the warm half so it reads as light, not a flat band */
.site-footer::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(125% 62% at 50% 80%,
    rgba(251,215,142, .42)  0%,
    rgba(244,187,104, .18) 40%,
    rgba(212,137,71, 0)   74%);
}
.site-footer > *{ position: relative; z-index: 1; }

/* pages ending on the brown CTA ramp through rust instead */
.cta + .site-footer{
  background: linear-gradient(180deg,
    #42332F  0%,
    #4A362F  8%,
    #563C2F 16%,
    #644431 25%,
    #764E32 34%,
    #885A34 44%,
    #9C6737 54%,
    #AF733C 65%,
    #C17E40 76%,
    #CE8444 86%,
    #D48947 94%,
    #D48947 100%);
}

/* ---------- CTA button: envelope-with-heart icon ----------------------- */
.btn--icon{
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.btn__icon{
  width: 1.35em;
  height: 1.35em;
  flex: none;
  margin-top: -1px;
}

/* CTA: no box — just the icon and the words */
.btn--icon{
  border: 0;
  padding: 8px 0;
}
.btn--icon:hover{
  background: none;
  color: var(--white);
}

/* ---------- highlighted title words in the wordmark script ------------- */
.page-hero__title .accent,
.services__title .accent{
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: .01em;
  padding-inline: .18em;
}

/* ---------- feed band: brown, so it ramps brown -> orange -------------- */
.feed{ background: var(--brown-band); }
.feed__title{ color: var(--cream); }
.feed__strip::-webkit-scrollbar-thumb{ background: rgba(255,226,181,.35); }

/* every page now meets the footer on brown, so the ramp runs through rust */
.site-footer,
.cta + .site-footer{
  background: linear-gradient(180deg,
    #42332F  0%,
    #4A362F  8%,
    #563C2F 16%,
    #644431 25%,
    #764E32 34%,
    #885A34 44%,
    #9C6737 54%,
    #AF733C 65%,
    #C17E40 76%,
    #CE8444 86%,
    #D48947 94%,
    #D48947 100%);
}

/* ---------- services: a peek at the hotel work ------------------------- */
.services__peek{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.peek{
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.peek img{
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.16,.68,.43,.99);
}
.peek:hover img{ transform: scale(1.045); }
.services__title{ margin-bottom: 54px; }

@media (prefers-reduced-motion: reduce){
  .peek img{ transition: none; }
  .peek:hover img{ transform: none; }
}
@media (max-width: 900px){
  .services__peek{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- CTA button: box back, larger icon -------------------------- */
.btn--icon{
  border: 1px solid var(--cream);
  padding: 15px 34px;
}
.btn--icon:hover{
  background: var(--cream);
  color: var(--brown-deep);
}
.btn__icon{
  width: 1.7em;
  height: 1.7em;
}

/* ---------- hotels page header: brown ground, gold type ---------------- */
.page--blue .site-header--solid{
  background: var(--brown-band);
  border-bottom: 0;
}
.page--blue .site-header--solid .nav a{ color: var(--gold); }
.page--blue .site-header--solid .nav a:hover,
.page--blue .site-header--solid .nav a[aria-current="page"]{ color: var(--cream); }

/* ---------- bigger swirly word in the page title ---------------------- */
.page-hero__title .accent{ font-size: 1.30em; padding-inline: .10em; }

/* ---------- footer wordmark: slow sparkle ----------------------------- */
.footer__logo{
  background-image: linear-gradient(105deg,
    var(--gold)   0%,
    var(--gold)  38%,
    #FFF6E8      47%,
    #FFECCF      52%,
    var(--gold)  62%,
    var(--gold) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wordmarkSparkle 7s linear infinite;
}
@keyframes wordmarkSparkle{
  from{ background-position: 130% 0; }
  to  { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce){
  .footer__logo{ animation: none; }
}

/* footer envelope now carries the heart too, so give it a touch more room */
.footer__icon{ width: 1.35em; height: 1.35em; }

/* The sparkle uses background-clip:text with a transparent fill, so the old
   text-shadow was painting a solid ghost BEHIND the see-through glyphs.
   That is what was mangling the final "t". Kill the shadow here. */
.footer__logo{ text-shadow: none; }

/* the brown strip around the portrait was the frame border itself, with the
   photo already flush against it. Drop the border so the image runs clean
   to the edge; the rounded corners stay. */
.polaroid{ border: 0; }

/* Plain gold wordmark, no glow.
   The sparkle relied on background-clip:text, which crops to the text box and
   was slicing the swash off the wordmark's final letter. Reverting the clip fixes
   the letterform; a little padding-right guarantees the swash has room. */
.footer__logo{
  background-image: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  animation: none;
  text-shadow: none;
  padding-right: .14em;
}

/* "making..." in the about heading uses the wordmark script, same as
   "unday" / "anderlust" (the page titles already do this) */
.about__display .accent{
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.22em;
  letter-spacing: .01em;
  padding-inline: .10em;
}

/* smaller yellow highlight behind "making..." — tighter sides, and a band
   that sits within the line rather than filling its whole height */
.about__display .accent.hl{
  padding-inline: .04em;
  background: linear-gradient(to bottom,
    transparent      24%,
    var(--cream)     24%,
    var(--cream)     84%,
    transparent      84%);
}

/* CTA button: dashed border instead of solid */
.btn--icon{
  border: 1px dashed var(--cream);
}

/* on hover the fill inverts, so the dashes must invert with it —
   brown dashes on cream, matching the text */
.btn--icon:hover{
  border-color: var(--brown-deep);
}

/* the sticky header and the brown CTA are the same colour, but fractional
   pixel positioning let a hairline of the section behind show between them.
   A 1px brown shadow under the header closes that seam. */
.page--blue .site-header--solid{
  box-shadow: 0 1px 0 0 var(--brown-band);
}

/* ---------- wordmark: breathing room + a soft shadow ------------------- */
.hero__logo,
.footer__logo{
  letter-spacing: .035em;   /* a little air between the letters */
  word-spacing: .22em;      /* and a clearer gap between the two words */
}

/* soft shadow behind the hero wordmark, warm rather than grey so it reads
   as depth against the video instead of a grey outline */
.hero__logo{
  text-shadow:
    0 1px 2px  rgba(45,28,13, .38),
    0 6px 18px rgba(45,28,13, .30);
}

/* the footer sits on orange, so its shadow is lighter and tighter */
.footer__logo{
  text-shadow:
    0 1px 2px  rgba(90,53,22, .28),
    0 5px 14px rgba(90,53,22, .20);
}

/* The film grain uses mix-blend-mode, which blends with everything beneath it
   in its stacking context. Isolating the media layer confines that blend to
   the video and effect layers so it can never speckle the wordmark. */
.hero__media{ isolation: isolate; }
.hero__logo{ z-index: 20; }

/* Wanderlust / Angel sit closer together */
.hero__logo{ line-height: .94; }
.footer__logo{ line-height: 1.0; }

/* ---------- wordmark initials: Great Vibes A, Alex Brush H ------------- */
/* both faces run small and light next to Yellowtail, so each is scaled to
   sit level with the body of the word rather than at its nominal size */
.script-i1{
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: 1.28em;
  line-height: 0;
  padding-right: .02em;
}
.script-i2{
  font-family: "Alex Brush", cursive;
  font-weight: 400;
  font-size: 1.30em;
  line-height: 0;
  padding-right: .015em;
}

/* Great Vibes and Alex Brush are finer than Kaushan Script's brush strokes, so the
   initials read thin beside the rest of the word. A text-stroke in the same
   colour thickens them to match; paint-order keeps the stroke outside the
   glyph so the letterforms stay true. Alex Brush is the finer of the two and
   needs more. Stroke widths are in em so they scale with the wordmark. */
.script-i1,
.script-i2{
  paint-order: stroke fill;
}
.script-i1{ -webkit-text-stroke: 0.012em currentColor; }
.script-i2{ -webkit-text-stroke: 0.014em currentColor; }

/* Great Vibes' A carries a right-hand swash, leaving a visible gap before
   the "m". Pull the following text back in with a negative margin. */
.script-i1{
  padding-right: 0;
  margin-right: -.02em;
}

/* ---------- feed: all three reels visible at once, no sideways scroll ---- */
.feed__grid{
  grid-template-columns: 1fr;
  gap: 34px;
}
.feed__strip{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  overflow: visible;
  padding-bottom: 0;
}
.feed__item{
  width: auto;
  height: auto;
  aspect-ratio: 9 / 16;
}
@media (max-width: 620px){
  .feed__strip{ gap: 9px; }
  .feed__grid{ gap: 24px; }
}

/* The grid carried 64px of blue padding below the last photo row, which read
   as a pale band sliding under the brown header before the CTA arrived.
   Drop it so the brown CTA starts straight after the photos; the CTA's own
   110px of top padding still gives the heading room, just in brown. */
.grid-all{ padding-bottom: 0; }

/* smaller reels: cap the strip width and centre it, so the three sit at a
   calmer size instead of filling the full container */
.feed__strip{
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 620px){
  .feed__strip{ max-width: 100%; }
}

/* centre the feed heading over the reels */
.feed__title{ text-align: center; }

/* brown breathing room under the photo grid, so the last row clears the
   sticky header and the two browns read as one block while scrolling */
.cta{ padding-top: 240px; }

/* "wanderlust" is a longer word than what was there before, so ease the
   caption size a touch to keep it inside the frame */
.polaroid__caption--tl{ font-size: clamp(1.1rem, 1.7vw, 1.45rem); }

/* a little blue under the last photo row before the brown CTA begins */
.grid-all{ padding-bottom: 64px; }

/* script accents inside the about paragraphs, matching the wordmark */
.about__body .accent{
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.28em;
  letter-spacing: .01em;
}

/* the brands panel was the only heading on brown still in pure white;
   cream matches the statement band, the CTA and the feed heading */
.brands__title{ color: var(--cream); }

/* services backdrop in the same cream as the review cards, instead of white.
   the wave above it has to match, otherwise the blue would drip into white
   and leave a visible seam against the cream below. */
.services{ background: #FBEEE4; }
.wave{ background: #FBEEE4; }

/* brands paragraph in cream too, so the whole panel reads as one voice
   rather than a cream heading over pale blue body text */
.brands__text{ color: var(--cream); }

/* ---------- copy still to be written by the site owner ------------------ */
.todo{
  background: rgba(212,137,71,.16);
  outline: 1px dashed rgba(212,137,71,.55);
  padding: 0 .18em;
  border-radius: 2px;
}