/* ============================================================
   Diamond Ridge Tech — shared stylesheet
   Engraved editorial: cream paper, navy ink, antique gold.
   ============================================================ */

:root{
  --paper:    #FBF8F1;
  --paper-2:  #F4EFE4;
  --ink:      #1C2A3F;
  --ink-2:    #45536B;
  --ink-3:    #5F6B80;   /* darkened from #6E7A8E to meet WCAG AA 4.5:1 */
  --gold:     #B08D57;
  --gold-lt:  #D6BC85;
  --gold-text:#86652F;   /* gold for TEXT (4.5:1+); --gold stays for ornaments */
  --rule:     rgba(28,42,63,.13);
  --rule-2:   rgba(28,42,63,.07);

  --display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --body:    "Spectral", Georgia, "Times New Roman", serif;

  --wrap: 1080px;
  --gut: 28px;
}

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

html{
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100dvh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}

/* Paper grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.32;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.35'/></svg>");
}

/* ---------- Guilloché atmosphere ---------- */
.guilloche{
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  color:var(--ink);
}
.guilloche circle{ fill:none; stroke:currentColor; }
.g-a{ top:-190px; right:-210px; width:560px; height:560px; }
.g-b{ bottom:-240px; left:-230px; width:620px; height:620px; }

/* ---------- Top bar + navigation ---------- */
.topbar{
  position:relative;
  z-index:3;
  border-bottom:1px solid var(--rule);
  background:rgba(251,248,241,.86);
  backdrop-filter:blur(6px);
}
.topbar-in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:14px var(--gut);
  display:flex;
  align-items:center;
  gap:22px;
}
.mark{
  font-family:var(--display);
  font-size:1.06rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.mark:hover{ color:var(--gold-text); }

.nav{
  margin-left:auto;
  display:flex;
  gap:26px;
  align-items:center;
}
.nav a{
  font-size:.7rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-2);
  text-decoration:none;
  padding:6px 0;
  position:relative;
}
.nav a:hover{ color:var(--ink); }
.nav a.is-current{ color:var(--ink); }
.nav a.is-current::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--gold);
}
.place{
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-left:22px;
  border-left:1px solid var(--rule);
  white-space:nowrap;
}

/* ---------- Page frame ---------- */
.page{
  position:relative;
  z-index:2;
  flex:1;
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:64px var(--gut) 84px;
}

/* Corner brackets with gold diamond tips */
.bracket{
  position:absolute;
  width:34px; height:34px;
  pointer-events:none;
}
.bracket::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--rule);
}
.bracket::after{
  content:"";
  position:absolute;
  width:5px; height:5px;
  background:var(--gold);
  transform:rotate(45deg);
}
.bk-tl{ top:26px; left:14px; }
.bk-tl::before{ border-right:0; border-bottom:0; }
.bk-tl::after{ top:-3px; left:-3px; }
.bk-tr{ top:26px; right:14px; }
.bk-tr::before{ border-left:0; border-bottom:0; }
.bk-tr::after{ top:-3px; right:-3px; }
.bk-bl{ bottom:26px; left:14px; }
.bk-bl::before{ border-right:0; border-top:0; }
.bk-bl::after{ bottom:-3px; left:-3px; }
.bk-br{ bottom:26px; right:14px; }
.bk-br::before{ border-left:0; border-top:0; }
.bk-br::after{ bottom:-3px; right:-3px; }

/* ---------- Type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; }

h1{
  font-size:clamp(2.6rem,6.4vw,4.1rem);
  line-height:1.08;
  letter-spacing:-.005em;
}
h1 em{ font-style:italic; font-weight:300; color:var(--ink-2); }

h2{
  font-size:clamp(1.85rem,3.6vw,2.5rem);
  line-height:1.18;
}

/* Inner-page titles are h1 for search engines and screen readers,
   but look exactly like h2 */
h1.title{
  font-size:clamp(1.85rem,3.6vw,2.5rem);
  line-height:1.18;
  letter-spacing:normal;
}

h3{
  font-size:1.22rem;
  letter-spacing:.02em;
}

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-text);
  margin:0 0 18px;
}

.lede{
  font-size:1.16rem;
  line-height:1.78;
  color:var(--ink-2);
  max-width:62ch;
}

.prose{ max-width:64ch; color:var(--ink-2); }
.prose strong{ color:var(--ink); font-weight:500; }

a{ color:var(--ink); text-decoration-color:var(--gold); text-underline-offset:4px; }
a:hover{ color:var(--gold-text); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Ornamental divider ---------- */
.orn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:56px 0;
}
.orn::before,.orn::after{
  content:"";
  height:1px;
  width:min(190px,26vw);
  background:linear-gradient(to right,transparent,var(--rule),transparent);
}
.orn i{
  width:6px; height:6px;
  background:var(--gold);
  transform:rotate(45deg);
  display:block;
}
.orn--left{ justify-content:flex-start; margin:38px 0 44px; }
.orn--left::after{ display:none; }
.orn--left::before{ width:64px; background:var(--gold); opacity:.55; }

/* ---------- Hero ---------- */
.hero{
  text-align:center;
  padding:26px 0 8px;
}
.gem{
  width:104px; height:96px;
  margin:0 auto 30px;
  display:block;
}
.gem path,.gem line{
  fill:none;
  stroke:var(--ink);
  stroke-width:1.15;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.gem [data-draw]{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:ink 1.5s cubic-bezier(.66,.02,.32,1) forwards;
}
.gem [data-draw="2"]{ animation-delay:.5s; }
.gem [data-draw="3"]{ animation-delay:.86s; }
.gem .glint{
  stroke:var(--gold);
  stroke-width:1.6;
  opacity:0;
  animation:glint 6.5s ease-in-out 2s infinite;
}
@keyframes ink{ to{ stroke-dashoffset:0; } }
@keyframes glint{
  0%,86%,100%{ opacity:0; }
  91%{ opacity:.85; }
}

.hero .lede{ margin:26px auto 0; }

/* ---------- Buttons ---------- */
.actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:34px;
}
.hero .actions{ justify-content:center; }
.center .actions{ justify-content:center; }

.btn{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  padding:14px 28px;
  text-decoration:none;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn--gold{ border-color:var(--gold-text); color:var(--gold-text); }
.btn--gold:hover{ background:var(--gold-text); color:var(--paper); border-color:var(--gold-text); }

/* ---------- Service cards ---------- */
/* One row, one column per card, however many cards there are (3 services,
   2 testimonials); stacks to one column on narrow screens (see Responsive). */
.cards{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:2px;
  background:var(--rule-2);
  border:1px solid var(--rule);
}
.card{
  background:var(--paper);
  padding:38px 28px 34px;
  text-align:center;
  transition:background .25s ease;
}
.card:hover{ background:var(--paper-2); }
.card h3{ margin:0 0 10px; }
.card p{
  font-size:.95rem;
  color:var(--ink-3);
  line-height:1.68;
  margin:0;
}
.frame{
  width:56px; height:56px;
  margin:0 auto 20px;
  border:1px solid var(--rule);
  transform:rotate(45deg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .25s ease;
}
.card:hover .frame{ border-color:var(--gold); }
.frame svg{
  width:22px; height:22px;
  transform:rotate(-45deg);
  fill:none;
  stroke:var(--ink);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .25s ease;
}
.card:hover .frame svg{ stroke:var(--gold); }

/* ---------- Credibility strip ---------- */
/* All items in one row on wide screens, 2 per row on tablets, stacked on
   phones (see Responsive). Never leaves one item alone on a row. */
.strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:34px 28px;
  padding:44px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.strip div{ text-align:center; }
.strip dt{
  font-family:var(--display);
  font-size:1.9rem;
  line-height:1.1;
  color:var(--ink);
  margin-bottom:6px;
}
.strip dd{
  margin:0;
  font-size:.68rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- Service catalog (services page) ---------- */
.catalog{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 52px;
}
.item{
  padding:30px 0;
  border-bottom:1px solid var(--rule);
}
.item h3{
  display:flex;
  align-items:baseline;
  gap:11px;
  margin:0 0 8px;
}
.item h3::before{
  content:"";
  width:5px; height:5px;
  background:var(--gold);
  transform:rotate(45deg);
  flex:none;
}
.item p{
  margin:0;
  font-size:.96rem;
  color:var(--ink-3);
  line-height:1.7;
}

/* ---------- Rates board ---------- */
.board{
  border:1px solid var(--rule);
  padding:38px 34px 34px;
  background:var(--paper-2);
  max-width:640px;
}
.board h3{
  text-align:center;
  margin:0 0 4px;
  font-size:1.5rem;
}
.board .board-sub{
  text-align:center;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 26px;
}
.rate{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:11px 0;
}
.rate + .rate{ border-top:1px dotted var(--rule); }
.rate .label{ white-space:nowrap; color:var(--ink-2); }
.rate .leader{
  flex:1;
  border-bottom:1px dotted rgba(28,42,63,.3);
  transform:translateY(-4px);
}
.rate .value{
  white-space:nowrap;
  font-family:var(--display);
  font-size:1.16rem;
  color:var(--ink);
}
.board-note{
  margin:24px 0 0;
  font-size:.86rem;
  color:var(--ink-3);
  text-align:center;
  line-height:1.65;
}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  background:var(--rule-2);
  border:1px solid var(--rule);
}
.contact-cell{
  background:var(--paper);
  padding:36px 30px;
}
.contact-cell .eyebrow{ margin-bottom:12px; }
.contact-cell .big{
  font-family:var(--display);
  font-size:clamp(1.15rem,6vw,1.42rem); /* email fits on one line down to 320px */
  line-height:1.35;
  word-break:break-word;
}
.contact-cell .big a{ text-decoration:none; border-bottom:1px solid var(--rule); }

/* Email/phone with a Copy button beside them; the button drops to its own
   line when there isn't room, so the address itself never breaks */
.contact-cell .big.has-copy{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
}
.copy{
  font-family:var(--body);
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1;
  color:var(--gold-text);
  background:none;
  border:1px solid var(--rule);
  padding:9px 12px 8px;
  min-width:6.4em; /* "Copy" and "Copied" take the same space */
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.copy:hover{ border-color:var(--gold-text); }
.copy.is-done{ color:var(--ink); border-color:var(--ink); }
.copy[hidden]{ display:none; }

/* Visible only to screen readers */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.contact-cell .big a:hover{ border-bottom-color:var(--gold); }
.contact-cell p.small{
  margin:10px 0 0;
  font-size:.9rem;
  color:var(--ink-3);
}

/* ---------- Callout ---------- */
.callout{
  text-align:center;
  padding:52px 28px;
  border:1px solid var(--rule);
  background:var(--paper-2);
}
.callout h2{ margin-bottom:14px; }
.callout .lede{ margin:0 auto; }
.callout .actions{ justify-content:center; }

/* ---------- Footer ---------- */
.footer{
  position:relative;
  z-index:2;
  border-top:1px solid var(--rule);
  text-align:center;
  padding:46px var(--gut) 52px;
}
.footer .greet{
  font-family:var(--display);
  font-style:italic;
  font-size:1.32rem;
  color:var(--ink);
  margin:0 0 10px;
}
.footer .reach{ margin:0 0 20px; color:var(--ink-2); }
.footer .reach a{ white-space:nowrap; } /* never split the phone number or email */
.footer a{ padding:8px 0; } /* bigger tap area; inline padding doesn't move anything */
.footer .area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 14px;
}
.footer .area i{
  width:5px; height:5px;
  background:var(--gold);
  transform:rotate(45deg);
  display:block;
  flex:none;
}
.footer .fine{
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}

/* ---------- Utility ---------- */
.center{ text-align:center; }
.tight{ max-width:70ch; margin-left:auto; margin-right:auto; }
.section{ margin-top:0; }
.stack-lg > * + *{ margin-top:34px; }

/* ---------- Responsive ---------- */
@media (max-width:899px){
  .strip{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  .topbar-in{ flex-wrap:wrap; gap:12px 18px; }
  .place{ display:none; }
  .nav{ gap:20px; }
}

@media (max-width:759px){
  .cards{ grid-auto-flow:row; grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  :root{ --gut:20px; }
  body{ font-size:16px; }
  .guilloche{ display:none; }
  .bracket{ display:none; }
  .page{ padding:44px var(--gut) 60px; }
  .topbar-in{ justify-content:center; text-align:center; }
  .nav{ margin-left:0; width:100%; justify-content:center; flex-wrap:wrap; gap:16px; }
  .orn{ margin:42px 0; }
  .board{ padding:30px 22px 26px; }
  /* A long value wraps inside its own right-aligned box instead of
     dropping the whole value onto a new line */
  .rate .value{ white-space:normal; text-align:right; }
  .btn{ width:100%; text-align:center; }
  .actions{ gap:10px; }
}

@media (max-width:480px){
  .strip{ grid-template-columns:1fr; }
}

@media (max-width:400px){
  .board{ padding-left:16px; padding-right:16px; }
}

@media (max-width:360px){
  .nav{ gap:12px; }
  .nav a{ letter-spacing:.14em; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .gem [data-draw]{ stroke-dashoffset:0; }
  .gem .glint{ opacity:.7; }
}

/* ---------- Billing details (rates page) ---------- */
.billing h2{ margin-bottom:6px; }
.billing h3{ margin:30px 0 8px; }
.billing p{ color:var(--ink-2); }
.examples{ list-style:none; padding:0; margin:0; }
.examples li{ padding:12px 0; border-top:1px dotted var(--rule); color:var(--ink-2); }
.examples li:first-child{ border-top:0; padding-top:4px; }
.examples strong{ color:var(--ink); font-weight:500; white-space:nowrap; }