/* dakinauret.com — rebuilt from the Wix original.
   Palette, type sizes and the two-column measure were all read off the rendered
   original rather than guessed, so this should sit on top of it near enough exactly. */
:root{
  --bg:#2f2f2e;          /* page and every section */
  --nav:#414141;
  --nav-ink:#cdcbc1;
  --sand:#d2c9b7;        /* section labels and body copy */
  --pale:#efeeea;        /* contact lines, hero surround */
  --foot:#8f8e8c;
  --container:980px;
  --labelcol:436px;
  --contentcol:450px;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--sand);
  font-family:var(--sans);font-size:14px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:50;background:var(--nav);color:#fff;padding:8px 12px}

/* ---------- nav ---------- */
.nav{background:var(--nav);position:sticky;top:0;z-index:20}
.nav-inner{
  max-width:var(--container);margin:0 auto;height:64px;
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3.4vw,46px);
  padding:0 16px;
}
.nav-inner a{
  font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--nav-ink);
  text-decoration:none;white-space:nowrap;
}
.nav-inner a:hover{color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--pale)}
.hero img{width:100%;height:auto;aspect-ratio:1440/549;object-fit:cover;object-position:center 42%}
.wordmark{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;gap:.22em;
  font-size:clamp(26px,2.8vw,40px);color:#fff;letter-spacing:.01em;
}
.wordmark strong{font-weight:700}
.wordmark span{font-weight:300}

/* ---------- the two-column row every section uses ---------- */
.row{
  /* 980px container, no side padding on desktop: the original puts the content
     column at exactly x=666 of 1440, which is container-start + the 436px label column. */
  max-width:var(--container);margin:0 auto;padding:62px 0;
  display:grid;grid-template-columns:var(--labelcol) var(--contentcol);
  align-items:center;justify-content:start;column-gap:0;
}
.label{
  margin:0;font-size:40px;font-weight:700;line-height:1.18;color:var(--sand);
  text-align:center;letter-spacing:.01em;
}
.content{min-width:0}
.prose{max-width:442px}
/* measured off the original: 14px on a 19.6px line, ~23px between paragraphs */
.prose p{margin:0 0 23px;color:var(--sand);font-size:14px;line-height:19.6px}
.prose p:last-child{margin-bottom:0}

/* ---------- 3 x 146px tile grid ---------- */
/* The original runs every tile and press card through grayscale(1) — measured, not guessed.
   The hero and the parallax band are left alone; they are already black and white. */
.grid{display:grid;grid-template-columns:repeat(3,146px);gap:6px}
.grid .art{width:146px;height:146px;object-fit:cover;filter:grayscale(1)}
.tile{position:relative;display:block;width:146px;height:146px;text-decoration:none}
.tile img{width:146px;height:146px;object-fit:cover;filter:grayscale(1)}
.tile span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 6px;
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;
}
.grid .art,.tile img,.card img{transition:filter .35s ease}
.grid .art:hover,.tile:hover img,.tile:focus-visible img,.card:hover img{filter:none}

/* ---------- features logos ---------- */
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 10px;align-items:center;justify-items:center}
.logo{display:flex;align-items:center;justify-content:center;width:100%;height:84px}
.logo svg{width:auto;max-width:var(--lw,120px);max-height:84px;height:auto}
.logo svg,.logo svg *{fill:#efeeea !important}
.logo svg{transition:transform .3s ease}
.logo:hover svg{transform:scale(1.18)}

/* ---------- press ---------- */
.press{display:flex;flex-direction:column;gap:6px}
.card{position:relative}
.card img{width:450px;height:120px;object-fit:cover;filter:grayscale(1)}
.card span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;
}

/* ---------- full-bleed photo ---------- */
/* A tall full-bleed photo section. The original scrolls it as parallax; the height is what
   sets the page's rhythm, so that is kept and the gimmick is not. */
.band{overflow:clip}
.band img{width:100%;aspect-ratio:1440/1139;height:auto;object-fit:cover;object-position:center 30%}

/* ---------- contact ---------- */
.contact .lines{display:flex;gap:34px;margin:0 0 26px;flex-wrap:wrap}
.line{display:inline-flex;align-items:center;gap:10px;color:var(--pale);font-size:14px}
.line a{color:var(--pale);text-decoration:none}
.line a:hover{text-decoration:underline}
/* Wix ships these icons with hard-coded brand fills; the original recolours them to the
   page's pale ink, so override every node rather than just the root. */
.line svg{width:20px;height:20px;flex:none}
.line svg,.line svg *{fill:currentColor !important;stroke:none}
/* the icon row spans exactly the phone + email line above it */
.content.contact{width:fit-content;max-width:100%}
.social{display:flex;gap:22px;margin:0;align-items:center;justify-content:space-between}
.social a{display:inline-flex;color:var(--pale)}
.social svg{width:26px;height:26px}
.social svg,.social svg *{fill:currentColor !important;stroke:none}
.social a:hover{opacity:.7}

/* ---------- footer ---------- */
.foot{background:var(--bg);padding:26px 0 30px}
.foot-inner{
  max-width:var(--container);margin:0 auto;padding:0 16px;
  display:flex;justify-content:space-between;gap:16px;
  font-size:10px;font-weight:700;color:var(--foot);
}

/* ---------- phones ---------- */
@media (max-width:900px){
  .row{grid-template-columns:1fr;row-gap:24px;padding:44px 20px;justify-items:center}
  .prose{max-width:100%}
  .label{text-align:center;font-size:32px}
  .content{width:100%;max-width:450px}
  .grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .grid .art,.tile,.tile img{width:100%;height:auto;aspect-ratio:1}
  .card img{width:100%}
  .nav-inner{gap:12px;overflow-x:auto;justify-content:flex-start}
  .foot-inner{flex-direction:column;align-items:center;text-align:center;gap:6px}
  .contact .lines{flex-direction:column;gap:12px}
}